<!-- Main Layout - Fullscreen Map with Overlay Sidebar -->
<div class="app-layout" [class.landing-mode]="landingMode" [class.transparent-bg]="transparentBackground">
  <!-- Progress Bar (thin gold line at top) -->
  <div class="intro-progress-bar" 
       *ngIf="showIntroOverlay" 
       [style.width.%]="introProgress">
  </div>

  <!-- Loading Overlay with Title and Spinner -->
  <div class="intro-loading-overlay" 
       *ngIf="showIntroOverlay">
    <div class="overlay-content">
      <div class="overlay-title-section">
        <h1 class="overlay-main-title">المخطط الاستراتيجي 2030</h1>
        <p class="overlay-subtitle">توزيع المشاريع حسب الأقاليم و الولايات في البلاد التونسية</p>
      </div>
      <div class="loading-spinner"></div>
    </div>
  </div>

  <div class="content-wrapper">
    <app-shared-topbar *ngIf="!hideTopbar"></app-shared-topbar>

    <div class="layout">
       <div class="main"
         [class.sidebar-open-left]="isSidebarVisible && (sidebarConfig.position === 'left' || sidebarConfig.position === 'inside-left')"
         [class.sidebar-open-right]="isSidebarVisible && (sidebarConfig.position === 'right' || sidebarConfig.position === 'inside-right')"
         [class.lang-ar]="currentLanguage === 'ar'"
         [class.lang-ltr]="currentLanguage !== 'ar'"
         [class.map-fullscreen-active]="isMapFullscreen"
         [class.full-map]="!showBrief"
         [class.split-map]="showBrief">
        <div class="container">
          <!-- BLUE SECTION -->
          <div class="blue-section" *ngIf="showBrief" dir="rtl" [style.background]="briefBgColor" [style.--brief-bg]="briefBgColor" [style.--brief-text]="briefTextColor">
            <div class="brief-text" [style.color]="briefTextColor" [style.--brief-text]="briefTextColor" [innerHTML]="briefText || ('<h3 class=\'brief-title\'>مخطط 2026-2030</h3><p>وزارة الاقتصاد والتخطيط هي المؤسسة الحكومية المسؤولة عن وضع السياسات الاقتصادية والتخطيط الاستراتيجي للتنمية في تونس.</p>')">
            </div>
          </div>

          <!-- MAP SECTION -->
          <div class="map-section" #mapSection [class.full]="!showBrief" [class.page-fullscreen]="isMapFullscreen">
            <div id="cesiumContainer" class="cesium-container"></div>
   <div
          class="district-hover-popup"
          *ngIf="districtHoverPopupVisible"
          [attr.dir]="currentLanguage === 'ar' ? 'rtl' : 'ltr'"
          [style.left.px]="districtHoverPopupX"
          [style.top.px]="districtHoverPopupY"
          [style.background]="districtHoverPopupBackground"
          [style.borderColor]="districtHoverPopupBorder"
          [style.color]="districtHoverPopupTextColor"
          [style.box-shadow]="districtHoverPopupShadow"
          [attr.dir]="currentLanguage === 'ar' ? 'rtl' : 'ltr'">
          {{ districtHoverPopupText }}
        </div>

            <!-- Title moved to top-left, hidden during intro -->
            <div class="permanent-title-overlay" *ngIf="!showIntroOverlay">
              <h1 class="permanent-title-text">المخطط الاستراتيجي 2030</h1>
              <p class="permanent-title-subtitle">توزيع المشاريع حسب الولايات و الأقاليم </p>
            </div>

            <!-- Fixed legend inside the map section (will not overlay the brief) -->
<div class="map-legend-fixed"
     *ngIf="legendVisible"
     [class.dragging]="legendDragging"
     [attr.dir]="currentLanguage === 'ar' ? 'rtl' : 'ltr'"
     [style.left.px]="legendPosition.x"
     [style.top.px]="legendPosition.y"
     (mousedown)="startLegendDrag($event)"
     (touchstart)="startLegendDrag($event); $event.stopPropagation()"
     (touchmove)="$event.stopPropagation()"
     (touchend)="$event.stopPropagation()">
  <div class="legend-header legend-drag-handle">
    <h4>{{ 'map.legend_title' | translate }}</h4>
    <button class="legend-close"
         (mousedown)="$event.stopPropagation()"
         (touchstart)="$event.stopPropagation()"
         (click)="toggleLegendVisibility(); $event.stopPropagation()">✕</button>
  </div>

  <div class="legend-item">
    <svg class="legend-icon" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="#e74c3c"/>
      <circle cx="12" cy="9" r="2.5" fill="#ffffff"/>
    </svg>
    <span>{{ 'map.legend_governorate' | translate }}</span>
  </div>
  <div class="legend-item">
    <svg class="legend-icon" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="#FFCF33"/>
      <circle cx="12" cy="9" r="2.5" fill="#ffffff"/>
    </svg>
    <span>{{ 'map.legend_project' | translate }}</span>
  </div>
</div>
            <!-- Selection frame: visually highlights the currently selected pin -->
            <div id="selection-frame" class="selection-frame" aria-hidden="true"></div>
          </div>
        </div>

        <!-- duplicate legend removed (keep the one inside the map-section only) -->
     

        <!-- Language selector moved into unified top-right map controls -->

        <!-- Landing overlay removed per UX request (explore card) -->

        <!-- Home Button removed per UX request: replaced by split toggle above -->

        <!-- ═══════════════════════════════════════════════════════════════ -->
        <!-- OVERLAY SIDEBAR — floats over the map like in the reference UI -->
        <!-- ═══════════════════════════════════════════════════════════════ -->
          <aside *ngIf="isSidebarVisible" class="info-panel" [class.mobile-expanded]="mobileSidebarExpanded"
           [class.panel-visible]="isSidebarVisible"
           [class.panel-detail]="!showLocationsList"
           [class.active]="!!selectedItem"
           [class.is-animating]="isAnimating"
           [ngClass]="getSidebarPanelClassMap()"
           [ngStyle]="getSidebarPanelStyle()">

          <!-- Close button -->
         

          <!-- ── SCROLLABLE BODY ── -->
          <div class="panel-scroll-body">
            <div class="panel-scroll-content" [attr.dir]="currentLanguage === 'ar' ? 'rtl' : 'ltr'">

            <!-- ══ HIERARCHICAL RTL DRILL-DOWN VIEW ══ -->
            <div *ngIf="isHierarchySidebarActive()" class="hierarchy-view-root" [attr.dir]="currentLanguage === 'ar' ? 'rtl' : 'ltr'" [class.rtl]="currentLanguage === 'ar'" [class.hierarchy-slide-in]="getHierarchyMotionClass() === 'hierarchy-slide-in'" [class.hierarchy-slide-out]="getHierarchyMotionClass() === 'hierarchy-slide-out'">

              <div class="hierarchy-header">
                <button class="hierarchy-top-arrow" (click)="onHierarchyTopBack()" title="Back">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4">
    <path d="M15 6l-6 6 6 6"/>
  </svg>
</button>
                
                <span class="hierarchy-level" *ngIf="hierarchyState.view === 'district'">{{ 'sidebar.district_overview' | translate }}</span>
                <span class="hierarchy-level" *ngIf="hierarchyState.view === 'governorate'">{{ 'sidebar.governorate_overview' | translate }}</span>
                <span class="hierarchy-level" *ngIf="hierarchyState.view === 'project'">{{ 'sidebar.project_overview' | translate }}</span>
                 <button type="button" class="btn-expand" (click)="toggleMobileSidebar(); $event.stopPropagation()" *ngIf="showRightSidebar">
            <svg *ngIf="!mobileSidebarExpanded" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="3 9 3 3 9 3"></polyline>
              <polyline points="15 3 21 3 21 9"></polyline>
              <polyline points="21 15 21 21 15 21"></polyline>
              <polyline points="9 21 3 21 3 15"></polyline>
            </svg>
            <svg *ngIf="mobileSidebarExpanded" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="9 3 9 9 3 9"></polyline>
              <polyline points="15 3 15 9 21 9"></polyline>
              <polyline points="9 21 9 15 3 15"></polyline>
              <polyline points="15 21 15 15 21 15"></polyline>
            </svg>
          </button>
                 <button type="button" class="btn-close" (click)="closeSidebar(); $event.stopPropagation(); $event.preventDefault()" *ngIf="showRightSidebar">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
              </div>

              <ng-container *ngIf="hierarchyState.view === 'district' && getHierarchyDistrict() as district">
              <div class="detail-hero">
  <img *ngIf="getDistrictImage(selectedDistrict!.id) as heroImg" [src]="heroImg"
       style="width:100%;height:100%;object-fit:cover;" alt=""/>
  <div *ngIf="!getDistrictImage(selectedDistrict!.id)" class="no-image-placeholder"
       style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
    <svg width="52" height="52" ...>...</svg>
  </div>
</div>
                <div class="panel-body hierarchy-panel-body">
                  <h2 class="location-title hierarchy-title">{{ district.displayName }}</h2>
                  <p class="description-text" *ngIf="district.description">{{ district.description }}</p>

                  <div class="meta-row" *ngIf="getDistrictCoordinateText(district.id) as districtCoords">
               
              
                  </div>

                  <h3 class="hierarchy-section-title">{{ 'sidebar.governorates' | translate }}</h3>
                  <div class="hierarchy-click-list">
                    <button
                      *ngFor="let governorate of district.governorates; let govIndex = index"
                      class="hierarchy-row-btn"
                      (click)="selectHierarchyGovernorate(govIndex)">
                  <div class="hierarchy-thumb">
  <img *ngIf="getGovernorateImage(governorate.name) as govImg" [src]="govImg"
       style="width:100%;height:100%;object-fit:cover;border-radius:4px;" alt=""/>
  <div *ngIf="!getGovernorateImage(governorate.name)" class="no-image-placeholder" ...>
    <svg ...>...</svg>
  </div>
</div>
                      <div class="hierarchy-row-meta">
                        <span class="hierarchy-row-title">{{ governorate.displayName }}</span>
                        <span class="hierarchy-row-sub">{{ 'sidebar.projects_count' | translate:{count: governorate.projects.length} }}</span>
                        <span class="hierarchy-row-coords" *ngIf="getGovernorateCoordinateText(governorate) as governorateCoords">
                      
                        </span>
                      </div>
                    </button>
                  </div>
                </div>
              </ng-container>

              <ng-container *ngIf="hierarchyState.view === 'governorate' && getHierarchyGovernorate() as governorate">
          <div class="detail-hero">
  <img *ngIf="getLocationImage(selectedLocation!) as heroImg" [src]="heroImg"
       style="width:100%;height:100%;object-fit:cover;" alt=""/>
  <div *ngIf="!getLocationImage(selectedLocation!)" class="no-image-placeholder" ...>
    <svg ...>...</svg>
  </div>
</div>
                <div class="panel-body hierarchy-panel-body">
                  <h2 class="location-title hierarchy-title">{{ governorate.displayName }}</h2>
                  <p class="description-text" *ngIf="governorate.description">{{ governorate.description }}</p>

                  <h3 class="hierarchy-section-title">{{ 'sidebar.projects' | translate }}</h3>
                    <div class="hierarchy-click-list">
                    <button
                      *ngFor="let projectNode of governorate.projects; let projectIndex = index"
                      class="hierarchy-row-btn"
                      (click)="selectHierarchyProject(projectIndex)">
                   <div class="hierarchy-thumb">
  <img *ngIf="getProjectImage(projectNode.project) as projImg" [src]="projImg"
       style="width:100%;height:100%;object-fit:cover;border-radius:4px;" alt=""/>
  <div *ngIf="!getProjectImage(projectNode.project)" class="no-image-placeholder" ...>
    <svg ...>...</svg>
  </div>
</div>
                      <div class="hierarchy-row-meta">
                        <span class="hierarchy-row-title">{{ getProjectSidebarDisplayName(projectNode.project) }}</span>
                        <span class="hierarchy-row-sub" *ngIf="projectNode.description">{{ projectNode.description }}</span>
                        <span class="hierarchy-row-coords" *ngIf="getProjectCoordinateText(projectNode.project) as projectCoords">
                         
                        </span>
                      </div>
                    </button>
                  </div>
                </div>
              </ng-container>

              <ng-container *ngIf="hierarchyState.view === 'project' && getHierarchyProject() as projectNode">
              <div class="detail-hero project-hero">
  <img *ngIf="getProjectImage(selectedProject!) as heroImg" [src]="heroImg"
       style="width:100%;height:100%;object-fit:cover;" alt=""/>
  <div *ngIf="!getProjectImage(selectedProject!)" class="no-image-placeholder" ...>
    <svg ...>...</svg>
  </div>
</div>
                <div class="panel-body hierarchy-panel-body">
                  <h2 class="location-title hierarchy-title">{{ getProjectSidebarDisplayName(projectNode.project) }}</h2>
                  <p class="description-text" *ngIf="projectNode.description">{{ projectNode.description }}</p>
                </div>
              </ng-container>

            </div>

            <ng-container *ngIf="!isHierarchySidebarActive()">

            <!-- ══ LIST VIEW ══ -->
            <div *ngIf="showLocationsList" class="locations-view">

              <!-- Filter Tabs -->
              <div class="filter-tabs">
                <button class="filter-tab" [class.active]="selectedRightSidebarTab === 'ALL'" (click)="setRightSidebarTab('ALL')">{{ 'filter.all' | translate }}</button>
                <button class="filter-tab" [class.active]="selectedRightSidebarTab === 'DISTRICTS'" (click)="setRightSidebarTab('DISTRICTS')">{{ 'sidebar.districts' | translate }}</button>
                <button class="filter-tab" [class.active]="selectedRightSidebarTab === 'GOVERNORATES'" (click)="setRightSidebarTab('GOVERNORATES')">{{ 'sidebar.governorates' | translate }}</button>
                <button class="filter-tab" [class.active]="selectedRightSidebarTab === 'SECTORS'" (click)="setRightSidebarTab('SECTORS')">{{ 'sidebar.sectors' | translate }}</button>
            <button type="button" class="btn-close-tab"
  *ngIf="showRightSidebar"
  (click)="closeSidebar(); $event.stopPropagation(); $event.preventDefault()"
  aria-label="Close tabs">

  <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>
         
              </div>

              <!-- Search bar shown only when tabs/list view is visible -->
              <div class="sidebar-search" *ngIf="showLocationsList">
                <input class="sidebar-search-input" type="search" [placeholder]="'sidebar.search' | translate" (input)="onSidebarSearch($event.target.value)" />
              </div>

              <!-- Clear All -->
              <div class="clear-all-section" *ngIf="countryLocationId && filteredLocations.length > 0 && !landingMode">
                <button class="btn-clear-all" (click)="clearAllCountryData()">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
                  </svg>
                  {{ 'map.clear_all' | translate }}
                </button>
              </div>

              <!-- Locations List -->
              <div class="locations-list">

                <!-- Contextual Projects (when setSidebarProjects is used) -->
                <div *ngIf="sidebarProjects && sidebarProjects.length > 0 && (selectedRightSidebarTab === 'ALL' || selectedRightSidebarTab === 'SECTORS')">
                  <p class="list-section-label">{{ 'sidebar.projects' | translate }}</p>
                  <div *ngFor="let project of sidebarProjects" class="project-sub-card" (click)="onSectorProjectClick(project)">
                   <div class="project-thumb">
  <img *ngIf="getProjectImage(project) as projImg" [src]="projImg"
       style="width:100%;height:100%;object-fit:cover;border-radius:6px;" alt=""/>
  <div *ngIf="!getProjectImage(project)" class="no-image-placeholder"
       style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"></path>
      <circle cx="12" cy="9" r="2.5" fill="currentColor"></circle>
    </svg>
  </div>
</div>
                    <div class="project-sub-info">
                      <div class="project-sub-name">{{ project.name }}</div>
                      <div class="project-sub-meta" *ngIf="getProjectResolvedLocationText(project) as projectLocationText">{{ projectLocationText }}</div>
                      <div class="project-sub-coordinates" *ngIf="getProjectCoordinateText(project) as projectCoordinates">
                      </div>
                    </div>
                    <div class="project-status-dot"
                         [class.status-done]="project.status === 'COMPLETED'"
                         [class.status-wip]="project.status === 'IN_PROGRESS'"></div>
                  </div>
                </div>


                <!-- Districts -->
                <div *ngIf="selectedRightSidebarTab === 'ALL' || selectedRightSidebarTab === 'DISTRICTS'">
                  <p class="list-section-label" *ngIf="selectedRightSidebarTab === 'ALL' && filteredDistricts.length > 0">{{ 'sidebar.districts' | translate }}</p>
                  <div *ngFor="let district of filteredDistricts"
                       class="location-card"
                       [class.active-selection]="isDistrictCardActive(district)"
                       (click)="selectDistrictFromList(district)">
                   <div class="location-thumbnail">
  <img *ngIf="getDistrictImage(district.id) as distImg" [src]="distImg" 
       style="width:100%;height:100%;object-fit:cover;border-radius:6px;" alt=""/>
  <div *ngIf="!getDistrictImage(district.id)" class="no-image-placeholder" 
       style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"></path>
      <circle cx="12" cy="9" r="2.5" fill="currentColor"></circle>
    </svg>
  </div>
</div>
                    <div class="location-info">
                      <h4>{{ currentLanguage === 'ar' ? district.name_ar : (currentLanguage === 'fr' ? district.name_fr : district.name_en) }}</h4>
                      <div class="location-coordinates" *ngIf="getDistrictCoordinateText(district.id) as districtCoordinates">
                        
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Governorates -->
                <div *ngIf="selectedRightSidebarTab === 'ALL' || selectedRightSidebarTab === 'GOVERNORATES'">
                  <p class="list-section-label" *ngIf="selectedRightSidebarTab === 'ALL' && filteredGovernorates.length > 0">{{ 'sidebar.governorates' | translate }}</p>
                  <div *ngFor="let gov of filteredGovernorates"
                       class="location-card"
                       [class.active-selection]="isGovernorateCardActive(gov)"
                       (click)="selectGovernorateFromList(gov)">
                  <div class="location-thumbnail">
  <img *ngIf="getGovernorateImage(gov.name || gov.displayName) as govImg" [src]="govImg"
       style="width:100%;height:100%;object-fit:cover;border-radius:6px;" alt=""/>
  <div *ngIf="!getGovernorateImage(gov.name || gov.displayName)" class="no-image-placeholder"
       style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"></path>
      <circle cx="12" cy="9" r="2.5" fill="currentColor"></circle>
    </svg>
  </div>
</div>
                    <div class="location-info">
                      <h4>{{ gov.displayName }}</h4>
                      <div class="location-coordinates" *ngIf="getGovernorateCoordinateText(gov) as governorateCoordinates">
                     
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Sectors -->
                <ng-container *ngFor="let sector of filteredSectors">
                  <div class="sector-header-card" (click)="toggleSector(sector)">
                    <div class="sector-icon" style="display:flex;align-items:center;justify-content:center;">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"></path>
                        <circle cx="12" cy="9" r="2.5" fill="currentColor"></circle>
                      </svg>
                    </div>
                    <div class="sector-info">
                      <div class="sector-name">{{ currentLanguage === 'ar' ? sector.nameAr : (currentLanguage === 'fr' ? sector.nameFr : sector.nameEn) }}</div>
                      <div class="sector-count">{{ 'sidebar.projects_count' | translate:{count: getProjectsBySector(sector.id).length} }}</div>
                    </div>
                    <div class="sector-chevron">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <path *ngIf="!isSectorOpen(sector)" d="M9 18l6-6-6-6"/>
                        <path *ngIf="isSectorOpen(sector)" d="M6 9l6 6 6-6"/>
                      </svg>
                    </div>
                  </div>

                  <ng-container *ngIf="isSectorOpen(sector)">
                    <div *ngFor="let project of getProjectsBySector(sector.id)"
                         class="project-sub-card"
                         (click)="onSectorProjectClick(project)">
                  <div class="project-thumb">
  <img *ngIf="getProjectImage(project) as projImg" [src]="projImg"
       style="width:100%;height:100%;object-fit:cover;border-radius:6px;" alt=""/>
  <div *ngIf="!getProjectImage(project)" class="no-image-placeholder"
       style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"></path>
      <circle cx="12" cy="9" r="2.5" fill="currentColor"></circle>
    </svg>
  </div>
</div>
                      <div class="project-sub-info">
                        <div class="project-sub-name">{{ project.name }}</div>
                        <div class="project-sub-meta" *ngIf="getProjectResolvedLocationText(project) as projectLocationText">{{ projectLocationText }}</div>
                        <div class="project-sub-coordinates" *ngIf="getProjectCoordinateText(project) as projectCoordinates">
                      
                        </div>
                      </div>
                      <div class="project-status-dot"
                           [class.status-done]="project.status === 'COMPLETED'"
                           [class.status-wip]="project.status === 'IN_PROGRESS'"></div>
                    </div>
                  </ng-container>
                </ng-container>

              </div>
              <!-- /locations-list -->
            </div>
            <!-- /list view -->


            <!-- ══ DETAIL VIEW ══ -->
            <div *ngIf="!showLocationsList && (selectedName || selectedDistrict || selectedProject)" class="detail-view-wrapper">

              <!-- ── District Detail ── -->
              <div *ngIf="selectedDistrict && selectedLocation" class="detail-view-content">
              <div class="detail-hero">
  <img *ngIf="getHierarchyDistrict()?.image as heroImg" [src]="heroImg"
       style="width:100%;height:100%;object-fit:cover;" alt=""/>
  <div *ngIf="!getHierarchyDistrict()?.image" class="no-image-placeholder" ...>...</div>
</div>
                <div class="panel-body">
                  <h2 class="location-title">{{ getDistrictName() }}</h2>
                  <div class="detail-coordinate-card" *ngIf="getDistrictCoordinateText(selectedDistrict.id) as districtCoordinates">
                 
                    <span class="detail-coordinate-value"></span>
                  </div>
                  <div *ngIf="selectedContents && selectedContents.length > 0" class="content-section">
                    <div *ngFor="let c of selectedContents">
                      <p *ngIf="c.content.type === 'TEXT'" class="description-text">{{ c.content.value }}</p>
                      <a *ngIf="c.content.type === 'LINK'" [href]="c.content.value" target="_blank" rel="noopener" class="external-link">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/></svg>
                        {{ 'location.view_more' | translate }}
                      </a>
                    </div>
                  </div>
                  <div class="action-row" *ngIf="!landingMode">
                    <button class="btn-action btn-edit" (click)="editDistrict()">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                      {{ 'map.edit' | translate }}
                    </button>
                    <button class="btn-action btn-delete" (click)="deleteDistrict()">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6"/></svg>
                      {{ 'map.delete' | translate }}
                    </button>
                  </div>
                </div>
              </div>

              <!-- ── Location / Governorate Detail ── -->
              <div *ngIf="selectedLocation && !selectedDistrict && !selectedProject" class="detail-view-content">
              <div class="detail-hero">
  <img *ngIf="getHierarchyGovernorate()?.image as heroImg" [src]="heroImg"
       style="width:100%;height:100%;object-fit:cover;" alt=""/>
  <div *ngIf="!getHierarchyGovernorate()?.image" class="no-image-placeholder" ...>...</div>
</div>
                <div class="panel-body">
                  <h2 class="location-title">{{ selectedName }}</h2>
                  <div class="detail-coordinate-card" *ngIf="getLocationCoordinateText(selectedLocation) as locationCoordinates">
               
                    <span class="detail-coordinate-value"></span>
                  </div>
                  <div *ngIf="selectedContents && selectedContents.length > 0" class="content-section">
                    <div *ngFor="let c of selectedContents">
                      <p *ngIf="c.content.type === 'TEXT'" class="description-text">{{ c.content.value }}</p>
                      <a *ngIf="c.content.type === 'LINK'" [href]="c.content.value" target="_blank" rel="noopener" class="external-link">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/></svg>
                        {{ 'location.view_more' | translate }}
                      </a>
                    </div>
                  </div>

                  <!-- Zone Child Points -->
                  <div class="child-points-section" *ngIf="currentZoneChildPoints && currentZoneChildPoints.length > 0">
                    <p class="list-section-label">{{ 'location.points_in_zone' | translate }}</p>
                    <div *ngFor="let cp of currentZoneChildPoints" class="location-card child-point-card" (click)="selectChildPoint(cp)">
                    <div class="project-thumb">
  <img *ngIf="getProjectImage(project) as projImg" [src]="projImg"
       style="width:100%;height:100%;object-fit:cover;border-radius:6px;" alt=""/>
  <div *ngIf="!getProjectImage(project)" class="no-image-placeholder"
       style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"></path>
      <circle cx="12" cy="9" r="2.5" fill="currentColor"></circle>
    </svg>
  </div>
</div>
                      <div class="location-info">
                        <h4>{{ cp.name }}</h4>
                        <div class="location-coordinates" *ngIf="getLocationCoordinateText(cp) as childCoordinates">
                       
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="action-row" *ngIf="!landingMode">
                    <ng-container *ngIf="selectedLocation?.category === 'GOVERNORATE'">
                      <button class="btn-action btn-edit" (click)="editGovernorate()">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                        {{ 'map.edit' | translate }}
                      </button>
                      <button class="btn-action btn-delete" (click)="deleteGovernorate()">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6"/></svg>
                        {{ 'map.delete' | translate }}
                      </button>
                    </ng-container>
                    <ng-container *ngIf="selectedLocation?.category !== 'GOVERNORATE' && selectedLocation?.category !== 'DISTRICT'">
                      <button class="btn-action btn-edit" (click)="editLocation()">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                        {{ 'map.edit' | translate }}
                      </button>
                      <button class="btn-action btn-delete" (click)="deleteLocation()">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6"/></svg>
                        {{ 'map.delete' | translate }}
                      </button>
                    </ng-container>
                  </div>
                </div>
              </div>

              <!-- ── Project Detail ── -->
              <div *ngIf="selectedProject && !selectedDistrict && !selectedLocation" class="detail-view-content">
              <div class="detail-hero project-hero">
  <img *ngIf="getHierarchyProject()?.image as heroImg" [src]="heroImg"
       style="width:100%;height:100%;object-fit:cover;" alt=""/>
  <div *ngIf="!getHierarchyProject()?.image" class="no-image-placeholder" ...>...</div>
</div>
                <div class="panel-body">
                  <h2 class="location-title">{{ selectedProject.name }}</h2>
                  <div class="detail-coordinate-card" *ngIf="getProjectCoordinateText(selectedProject) as projectCoordinates">
         
                    <span class="detail-coordinate-value"></span>
                  </div>
                  <div class="content-section">
                    <div class="meta-row" *ngIf="selectedProject.sectorNameEn || selectedProject.sectorNameAr">
                      <span class="meta-label">{{ 'sidebar.sector' | translate }}</span>
                      <span class="meta-value">{{ currentLanguage === 'ar' ? selectedProject.sectorNameAr : (currentLanguage === 'fr' ? selectedProject.sectorNameFr : selectedProject.sectorNameEn) }}</span>
                    </div>
                    <div class="meta-row" *ngIf="selectedProject.budget">
                      <span class="meta-label">{{ 'sidebar.budget' | translate }}</span>
                      <span class="meta-value">{{ selectedProject.budget }}</span>
                    </div>
                    <div class="meta-row" *ngIf="selectedProject.status">
                      <span class="meta-label">{{ 'sidebar.status' | translate }}</span>
                      <span class="meta-value status-badge"
                            [class.status-completed]="selectedProject.status === 'COMPLETED'"
                            [class.status-inprogress]="selectedProject.status === 'IN_PROGRESS'">
                        {{ selectedProject.status }}
                      </span>
                    </div>
                    <p *ngIf="selectedProject.description" class="description-text" style="margin-top:14px;">{{ selectedProject.description }}</p>
                  </div>
                  <div class="action-row" *ngIf="!landingMode">
                    <button class="btn-action btn-edit" (click)="editProject()">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                      {{ 'map.edit' | translate }}
                    </button>
                    <button class="btn-action btn-delete" (click)="deleteProject()">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6"/></svg>
                      {{ 'map.delete' | translate }}
                    </button>
                  </div>
                </div>
              </div>

              <!-- Back button pinned at bottom in detail mode -->
       <button class="btn-back" (click)="backToList()">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
    <path d="M19 12H5M12 19l-7-7 7-7"/>
  </svg>
</button>

            </div>
            <!-- /detail view -->

            </ng-container>

            </div>
          </div>
          <!-- /panel-scroll-body -->

          <div class="hierarchy-explore-navigation"
               *ngIf="isHierarchySidebarActive() && (hierarchyState.view === 'governorate' || hierarchyState.view === 'project')">
            <button class="hierarchy-explore-arrow" (click)="navigateHierarchyPrevious()" [disabled]="!canNavigateHierarchyPrevious()">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4">
                <path d="M15 18l-6-6 6-6"/>
              </svg>
            </button>
            <div class="hierarchy-explore-center">
              <span class="hierarchy-explore-current" *ngIf="getHierarchyExploreLabel()">{{ getHierarchyExploreLabel() }}</span>
              <span class="hierarchy-explore-counter">{{ getHierarchyExploreCurrentPosition() }} / {{ getHierarchyExploreTotal() }}</span>
            </div>
            <button class="hierarchy-explore-arrow second" (click)="navigateHierarchyNext()" [disabled]="!canNavigateHierarchyNext()">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4">
                <path d="M9 18l6-6-6-6"/>
              </svg>
            </button>
          </div>

          <!-- ══ EXPLORE MORE BAR — only shown for districts / governorates / sectors ══ -->
          <div class="explore-navigation"
  *ngIf="!isHierarchySidebarActive() && showRightSidebar && (selectedRightSidebarTab === 'DISTRICTS' || selectedRightSidebarTab === 'GOVERNORATES' || selectedRightSidebarTab === 'SECTORS' || (!showLocationsList && (selectedProject || selectedDistrict || (selectedLocation && (selectedLocation.category === 'GOVERNORATE' || selectedLocation.category === 'DISTRICT')))))">

  <button class="nav-arrow" (click)="navigatePrevious()" [disabled]="shouldDisablePrevious()">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
      <path d="M9 6l6 6-6 6"/>
    </svg>
  </button>
 <div class="explore-center">
    <span class="explore-current" *ngIf="getExploreTotal() > 0">{{ getExploreCurrentLabel() }}</span>
    <span class="explore-counter" *ngIf="getExploreTotal() > 0">{{ getExploreCurrentPosition() }} / {{ getExploreTotal() }}</span>
  </div>
  <button class="nav-arrow second" (click)="navigateNext()" [disabled]="shouldDisableNext()">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
      <path d="M15 6l-6 6 6 6"/>
    </svg>
  </button>

 

</div>

        </aside>
        <!-- /info-panel -->

        <!-- Sidebar open button — visible when sidebar is closed -->
     

      </div>
      <!-- /main -->
    </div>
  </div>
</div>
