<div class="map-settings-layout">
  <!-- Dark Left Sidebar -->
<aside class="left-sidebar">
  <div class="sidebar-header">
    <h2>Map Settings</h2>
    <div class="header-actions">
      <button class="btn-load-default" (click)="loadDefaultMap()" title="Load Default Map">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
          <polyline points="9 22 9 12 15 12 15 22"></polyline>
        </svg>
      </button>
      <button class="btn-create-new" (click)="toggleCreateForm()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="12" y1="5" x2="12" y2="19"></line>
          <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
        New Map
      </button>
      <button class="btn-clear-all" (click)="clearAllData()" title="Clear all data">
        <svg width="18" height="18" 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"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Create Form -->
  <div class="create-form-container" *ngIf="showCreateForm">
    <h3>Create Default Map</h3>
    <div class="form-group">
      <label>Country Name</label>
      <div class="country-dropdown-wrapper">
        <input type="text" [(ngModel)]="countrySearchQuery" (ngModelChange)="filterCountries()"
          (focus)="showCountryDropdown = true" placeholder="Search for a country..." class="dark-input country-search"/>
        <div class="country-dropdown" *ngIf="showCountryDropdown && filteredCountries.length > 0"
          style="background: #000000; border: 1px solid rgba(255,255,255,0.2);">
          <div *ngFor="let country of filteredCountries" class="country-option"
            (click)="selectCountry(country)" style="color: #ffffff; background: #000000;">
            {{ country }}
          </div>
        </div>
        <div class="country-dropdown-empty" *ngIf="showCountryDropdown && filteredCountries.length === 0">
          <p>No countries found</p>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label>Border Color</label>
      <input type="color" [(ngModel)]="newMap.borderColor" class="color-picker"/>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label>Opacity</label>
        <input type="number" [(ngModel)]="newMap.fillOpacity" step="0.1" min="0" max="1" class="dark-input"/>
      </div>
      <div class="form-group">
        <label>Width</label>
        <input type="number" [(ngModel)]="newMap.borderWidth" min="1" max="10" class="dark-input"/>
      </div>
    </div>
    <div class="form-actions">
      <button class="btn-cancel" (click)="toggleCreateForm()">Cancel</button>
      <button class="btn-save" (click)="createMap()">Create Map</button>
    </div>
  </div>

  <!-- Search Bar -->
  <div class="search-container">
    <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="11" cy="11" r="8"></circle>
      <path d="m21 21-4.35-4.35"></path>
    </svg>
    <input type="text" [(ngModel)]="searchQuery" (ngModelChange)="searchMaps()"
      placeholder="Search maps..." class="search-input"/>
  </div>

  <!-- Drawing Controls -->
  <div class="drawing-controls" *ngIf="currentLoadedMap">
    <button class="btn-draw-point" (click)="startPointDrawing()" [disabled]="drawingPolygon">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
        <circle cx="12" cy="10" r="3"></circle>
      </svg>
      Create Point
    </button>
    <button class="btn-draw-zone" (click)="startPolygonDrawing()" [disabled]="drawingPoint">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
        <path d="M2 17l10 5 10-5M2 12l10 5 10-5"></path>
      </svg>
      Start Zone
    </button>
    <button class="btn-finish-zone" *ngIf="drawingPolygon" (click)="finishPolygon()">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
      Finish Zone
    </button>
  </div>

  <!-- ── SIDEBAR CUSTOMIZATION COLLAPSIBLE ── -->
  <div class="collapsible-section" id="sidebar-customization">
    <button class="collapsible-toggle" (click)="toggleSidebarCustomization()">
      <div style="display:flex; align-items:center; gap:10px;">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="3"></circle>
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
        </svg>
        Sidebar Customization
      </div>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        [style.transform]="showSidebarCustomization ? 'rotate(180deg)' : 'rotate(0deg)'"
        style="transition: transform 0.3s ease;">
        <polyline points="6 9 12 15 18 9"></polyline>
      </svg>
    </button>

    <div class="collapsible-body" [class.open]="showSidebarCustomization">
      <div class="form-row">
        <div class="form-group">
          <label>Default Map</label>
          <select class="dark-input" [(ngModel)]="selectedDefaultMapId">
            <option [ngValue]="null">(choose a map)</option>
            <option *ngFor="let m of maps" [ngValue]="m.id">{{ m.countryName }}</option>
          </select>
        </div>
        <div class="form-group" style="display:flex;align-items:flex-end;gap:8px;">
          <button class="btn-save" (click)="setAsActive(selectedDefaultMapId!)" [disabled]="!selectedDefaultMapId">Set as Default</button>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>Position</label>
          <select class="dark-input" [(ngModel)]="sidebarConfig.position" (ngModelChange)="onSidebarConfigChanged()">
            <option *ngFor="let pos of sidebarPositions" [ngValue]="pos">{{ pos }}</option>
          </select>
        </div>
        <div class="form-group">
          <label>Animation</label>
          <select class="dark-input" [(ngModel)]="sidebarConfig.animationStyle" (ngModelChange)="onSidebarConfigChanged()">
            <option *ngFor="let anim of sidebarAnimations" [ngValue]="anim">{{ anim }}</option>
          </select>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>Map Display Mode</label>
          <select class="dark-input" [ngModel]="briefLayoutMode" (ngModelChange)="onBriefLayoutModeChanged($event)">
            <option [ngValue]="'full'">Full Map (100%)</option>
            <option [ngValue]="'split'">Split View (50/50 + Brief)</option>
          </select>
        </div>
        <div class="form-group">
          <label>
            <input
              type="checkbox"
              [ngModel]="showBrief"
              (ngModelChange)="toggleBrief($event)"/>
            Show Brief (50/50)
          </label>
          <div style="margin-top:6px; font-size:12px; color:rgba(255,255,255,0.65);">
            Enable to show split view. Disable for full map only.
          </div>
        </div>
      </div>
      <!-- Brief panel customization -->
      <div class="form-row" style="margin-top:12px; border-top:1px solid rgba(255,255,255,0.04); padding-top:12px;">
        <div class="form-group">
          <label>Brief Background Color</label>
          <input type="color" class="color-picker" [(ngModel)]="briefBgColor" (ngModelChange)="settingsService.updateSettings({ briefBgColor: briefBgColor })" />
        </div>
        <div class="form-group">
          <label>Brief Text Color</label>
          <input type="color" class="color-picker" [(ngModel)]="briefTextColor" (ngModelChange)="settingsService.updateSettings({ briefTextColor: briefTextColor })" />
        </div>
      </div>
      <div class="form-row" style="margin-top:8px;">
        <div class="form-group" style="width:100%;">
          <label>Brief Text</label>
          <textarea class="dark-input" rows="4" [(ngModel)]="briefText" (ngModelChange)="settingsService.updateSettings({ briefText: briefText })" placeholder="HTML or plain text for the brief panel"></textarea>
        </div>
      </div>
      <div class="form-row" style="margin-top:8px; border-top:1px solid rgba(255,255,255,0.04); padding-top:12px;">
        <div class="form-group">
          <label>Sidebar Overlay Effect</label>
          <select class="dark-input" [(ngModel)]="sidebarOverlayEffect" (ngModelChange)="settingsService.updateSettings({ sidebarOverlayEffect: sidebarOverlayEffect })">
            <option [ngValue]="'none'">None</option>
            <option [ngValue]="'smoke'">White Fog / Smoke</option>
            <option [ngValue]="'white'">White Overlay (fog)</option>
            <option [ngValue]="'dark'">Dark / Cinematic</option>
            <option [ngValue]="'gradient'">Gradient Overlay</option>
            <option [ngValue]="'glass'">Glass / Frosted (backdrop blur)</option>
            <option [ngValue]="'opacity'">Opacity Overlay</option>
          </select>
        </div>
        <div class="form-group">
          <label>Overlay Strength</label>
          <input type="range" min="0" max="1" step="0.05" class="dark-input" [(ngModel)]="sidebarOverlayOpacity" (ngModelChange)="settingsService.updateSettings({ sidebarOverlayOpacity: sidebarOverlayOpacity })" />
          <div style="font-size:12px; color:rgba(255,255,255,0.7); margin-top:6px;">{{ (sidebarOverlayOpacity || 0).toFixed(2) }}</div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>Width (vw)</label>
          <input type="number" class="dark-input" min="12" max="45" [(ngModel)]="sidebarConfig.widthVw" (ngModelChange)="onSidebarConfigChanged()"/>
        </div>
        <div class="form-group">
          <label>Font Size (px)</label>
          <input type="number" class="dark-input" min="11" max="24" [(ngModel)]="sidebarConfig.fontSizePx" (ngModelChange)="onSidebarConfigChanged()"/>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>Background Type</label>
          <select class="dark-input" [(ngModel)]="sidebarConfig.backgroundType" (ngModelChange)="onSidebarConfigChanged()">
            <option [ngValue]="'solid'">solid</option>
            <option [ngValue]="'image'">image</option>
          </select>
        </div>
        <div class="form-group" *ngIf="sidebarConfig.backgroundType === 'solid'">
          <label>Background Color</label>
          <input type="color" class="color-picker" [(ngModel)]="sidebarConfig.backgroundColor" (ngModelChange)="onSidebarConfigChanged()"/>
        </div>
      </div>
      <div class="form-group" *ngIf="sidebarConfig.backgroundType === 'image'">
        <label>Background Image</label>
        <input type="file" accept="image/*" class="dark-input" (change)="onSidebarBackgroundImageUpload($event)"/>
        <div style="margin-top:8px; display:flex; gap:8px; align-items:center;">
          <label style="font-size:12px; color:rgba(255,255,255,0.7);">Opacity</label>
          <input type="range" min="0" max="1" step="0.05" [(ngModel)]="sidebarConfig.backgroundImageOpacity" (ngModelChange)="onSidebarConfigChanged()"/>
          <span style="min-width:36px; font-size:12px; color:rgba(255,255,255,0.8);">{{ (sidebarConfig.backgroundImageOpacity || 0).toFixed(2) }}</span>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>Text Color</label>
          <input type="color" class="color-picker" [(ngModel)]="sidebarConfig.textColor" (ngModelChange)="onSidebarConfigChanged()"/>
        </div>
        <div class="form-group">
          <label>Font Family</label>
          <input type="text" class="dark-input" [(ngModel)]="sidebarConfig.fontFamily" (ngModelChange)="onSidebarConfigChanged()"/>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label><input type="checkbox" [(ngModel)]="sidebarConfig.autoHide" (ngModelChange)="onSidebarConfigChanged()"/> Auto-hide</label>
        </div>
        <div class="form-group">
          <label><input type="checkbox" [(ngModel)]="sidebarConfig.reappearOnSelection" (ngModelChange)="onSidebarConfigChanged()"/> Reappear on selection</label>
        </div>
      </div>
      <div class="form-actions">
        <button class="btn-save" (click)="saveSidebarCustomization()">Save Sidebar Customization</button>
        <button class="btn-cancel" (click)="resetSidebarConfig()">Reset</button>
      </div>
    </div>
  </div>

  <!-- Maps List -->
  <div class="maps-list-container">
    <div class="map-item" *ngFor="let map of filteredMaps">
      <div class="map-item-header">
        <h4>{{ map.countryName }}</h4>
        <span class="color-indicator" [style.background-color]="map.borderColor"></span>
      </div>
      <div class="map-item-details">
        <span class="detail-badge">Opacity: {{ map.fillOpacity }}</span>
        <span class="detail-badge">Width: {{ map.borderWidth }}px</span>
      </div>
      <div class="map-item-actions">
        <button class="btn-load" (click)="loadDefaultMapOnViewer(map)" title="Load on map">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
            <circle cx="12" cy="10" r="3"></circle>
          </svg>
          Load
        </button>
        <button class="btn-set-active" (click)="setAsActive(map.id!)" title="Set as active">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          Active
        </button>
        <button class="btn-delete-icon" (click)="deleteMap(map.id!)" title="Delete">
          <svg width="16" height="16" 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"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="empty-state" *ngIf="filteredMaps.length === 0">
      <svg class="empty-icon" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
        <circle cx="12" cy="10" r="3"></circle>
      </svg>
      <p>No maps found</p>
    </div>
  </div>
</aside>



  <!-- Center - Cesium Map -->
  <main class="map-viewer">
    <!-- Topbar for language switcher removed (now in unified controls panel) -->
    <div id="mapSettingsCesiumContainer"></div>
    <div class="map-overlay" *ngIf="currentLoadedMap">
      <span class="map-name">{{ currentLoadedMap.countryName }}</span>
    </div>
  </main>

  <!-- Right Sidebar - Location List or Details -->
  <aside class="info-panel" *ngIf="showRightSidebar">

  <!-- ── PANEL HEADER (fixed, never scrolls) ── -->
  <div class="info-panel-header">
    <div class="info-panel-header-inner">
      <span class="info-panel-title">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
          <circle cx="12" cy="10" r="3"></circle>
        </svg>
        {{ showLocationsList ? 'Locations' : (selectedProject ? 'Project' : (selectedDistrict ? 'District' : 'Location')) }}
      </span>
      <div style="display:flex; gap:6px; align-items:center;">
        <button class="btn-back" *ngIf="!showLocationsList" (click)="backToList()" title="Back to list"
          style="width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.08); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M19 12H5M12 19l-7-7 7-7"/>
          </svg>
        </button>
        <button (click)="clearSelection()"
          style="width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.08); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;">
          <svg width="16" height="16" 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>
    </div>

    <!-- Filter Tabs (only in list view) -->
    <div class="filter-tabs" *ngIf="showLocationsList">
      <button class="filter-tab filter-tab-all" [class.active]="selectedRightSidebarTab === 'ALL'" (click)="setRightSidebarTab('ALL')">All</button>
      <button class="filter-tab" [class.active]="selectedRightSidebarTab === 'DISTRICTS'" (click)="setRightSidebarTab('DISTRICTS')">Districts</button>
      <button class="filter-tab" [class.active]="selectedRightSidebarTab === 'GOVERNORATES'" (click)="setRightSidebarTab('GOVERNORATES')">Governorates</button>
      <button class="filter-tab" [class.active]="selectedRightSidebarTab === 'SECTORS'" (click)="setRightSidebarTab('SECTORS')">Sectors</button>
    </div>
  </div>

  <!-- ── SCROLLABLE BODY ── -->
  <div class="info-panel-scroll-body">

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

        <!-- Districts -->
        <div *ngIf="selectedRightSidebarTab === 'ALL' || selectedRightSidebarTab === 'DISTRICTS'">
          <p class="list-section-label" *ngIf="selectedRightSidebarTab === 'ALL' && filteredDistricts.length > 0">Districts</p>
          <div *ngFor="let district of filteredDistricts" class="location-card" (click)="selectDistrictFromList(district)">
            <div class="location-thumbnail">
                <div 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" 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>
            <div class="location-info">
              <h4>{{ currentLanguage === 'ar' ? district.name_ar : (currentLanguage === 'fr' ? district.name_fr : district.name_en) }}</h4>
              <p style="font-size:12px; color:rgba(255,255,255,0.5); margin:2px 0 0;">{{ district.members?.length || 0 }} governorates</p>
            </div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="2" style="flex-shrink:0;">
              <path d="M9 18l6-6-6-6"/>
            </svg>
          </div>
        </div>

        <!-- Governorates -->
        <div *ngIf="selectedRightSidebarTab === 'ALL' || selectedRightSidebarTab === 'GOVERNORATES'">
          <p class="list-section-label" *ngIf="selectedRightSidebarTab === 'ALL' && filteredGovernorates.length > 0">Governorates</p>
          <div *ngFor="let gov of filteredGovernorates" class="location-card" (click)="selectGovernorateFromList(gov)">
            <div class="location-thumbnail">
                <div 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" 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>
            <div class="location-info">
              <h4>{{ gov.displayName }}</h4>
            </div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="2" style="flex-shrink:0;">
              <path d="M9 18l6-6-6-6"/>
            </svg>
          </div>
        </div>

        <!-- Sectors -->
        <ng-container *ngFor="let sector of filteredSectors">
          <div class="sector-card" (click)="toggleSector(sector)">
            <div style="display:flex; gap:12px; align-items:center; flex:1; min-width:0;">
              <div class="sector-icon-box" 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 style="min-width:0;">
                <div style="font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                  {{ currentLanguage === 'ar' ? sector.nameAr : (currentLanguage === 'fr' ? sector.nameFr : sector.nameEn) }}
                </div>
                <div style="font-size:12px; color:rgba(255,255,255,0.55); margin-top:3px;">
                  {{ getProjectsBySector(sector.id).length }} project(s)
                </div>
              </div>
            </div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="2"
              [style.transform]="isSectorOpen(sector) ? 'rotate(90deg)' : 'rotate(0)'"
              style="transition:transform 0.25s ease; flex-shrink:0;">
              <path d="M9 18l6-6-6-6"/>
            </svg>
          </div>

          <ng-container *ngIf="isSectorOpen(sector)">
            <div *ngFor="let project of getProjectsBySector(sector.id)" class="project-list-card"
              (click)="onSectorProjectClick(project)">
              <div style="flex:0 0 48px; width:48px; height:48px;">
                <div class="no-image-placeholder"
                  style="width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#2d2d2d;border-radius:8px;color:#00ffff;">
                  <svg width="24" height="24" 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>
              <div style="flex:1; min-width:0;">
                <div style="font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ project.name }}</div>
                <div style="font-size:12px; color:rgba(255,255,255,0.5); margin-top:3px;">
                  <span *ngIf="project.governorateName">{{ project.governorateName }}</span>
                </div>
              </div>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="2" style="flex-shrink:0;">
                <path d="M9 18l6-6-6-6"/>
              </svg>
            </div>
          </ng-container>
        </ng-container>

      </div>
    </div>

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

      <!-- Hero Image -->
      <div class="detail-hero">
        <div class="no-image-placeholder" style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
          <svg width="52" height="52" 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="detail-hero-gradient"></div>
        <div class="detail-hero-title">{{ selectedName || getDistrictName() }}</div>
      </div>

      <div class="detail-body">
        <h2 class="detail-title">{{ selectedName || getDistrictName() }}</h2>

        <!-- District detail contents -->
        <ng-container *ngIf="selectedDistrict && selectedLocation">
          <div *ngFor="let c of selectedContents">
            <p *ngIf="c.content.type === 'TEXT'" class="detail-description">{{ c.content.value }}</p>
            <a *ngIf="c.content.type === 'LINK'" [href]="c.content.value" target="_blank" class="detail-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>
              View more
            </a>
          </div>
          <div class="detail-actions">
            <button class="detail-btn detail-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>
              Edit
            </button>
            <button class="detail-btn detail-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 2v2"/></svg>
              Delete
            </button>
          </div>
        </ng-container>

        <!-- Regular location contents -->
        <ng-container *ngIf="selectedLocation && !selectedDistrict">
          <div *ngFor="let c of selectedContents">
            <p *ngIf="c.content.type === 'TEXT'" class="detail-description">{{ c.content.value }}</p>
            <a *ngIf="c.content.type === 'LINK'" [href]="c.content.value" target="_blank" class="detail-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>
              View more
            </a>
          </div>

          <!-- Zone child points -->
          <div *ngIf="currentZoneChildPoints?.length > 0" style="margin-top:20px;">
            <p class="list-section-label">Points in Zone</p>
            <div *ngFor="let pt of currentZoneChildPoints" class="location-card" (click)="selectChildPoint(pt)">
              <div class="location-thumbnail">
                <div 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" 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>
              <div class="location-info"><h4>{{ pt.name }}</h4></div>
            </div>
          </div>

          <div class="detail-actions">
            <ng-container *ngIf="selectedLocation?.category === 'GOVERNORATE'">
              <button class="detail-btn detail-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>
                Edit
              </button>
              <button class="detail-btn detail-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 2v2"/></svg>
                Delete
              </button>
            </ng-container>
            <ng-container *ngIf="selectedLocation?.category !== 'GOVERNORATE' && selectedLocation?.category !== 'DISTRICT'">
              <button class="detail-btn detail-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>
                Edit
              </button>
              <button class="detail-btn detail-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 2v2"/></svg>
                Delete
              </button>
            </ng-container>
          </div>
        </ng-container>

        <!-- Project detail -->
        <ng-container *ngIf="selectedProject && !selectedDistrict && !selectedLocation">
          <div class="detail-meta-grid">
            <div class="detail-meta-item" *ngIf="selectedProject.sectorNameEn || selectedProject.sectorNameAr">
              <span class="detail-meta-label">Sector</span>
              <span class="detail-meta-value">{{ currentLanguage === 'ar' ? selectedProject.sectorNameAr : selectedProject.sectorNameEn }}</span>
            </div>
            <div class="detail-meta-item" *ngIf="selectedProject.governorateName">
              <span class="detail-meta-label">Location</span>
              <span class="detail-meta-value">{{ selectedProject.governorateName }}<span *ngIf="selectedProject.districtName">, {{ selectedProject.districtName }}</span></span>
            </div>
            <div class="detail-meta-item" *ngIf="selectedProject.budget">
              <span class="detail-meta-label">Budget</span>
              <span class="detail-meta-value">{{ selectedProject.budget }}</span>
            </div>
            <div class="detail-meta-item" *ngIf="selectedProject.status">
              <span class="detail-meta-label">Status</span>
              <span class="detail-meta-value"
                [style.color]="selectedProject.status === 'COMPLETED' ? '#00ff88' : (selectedProject.status === 'IN_PROGRESS' ? '#ffaa00' : '#fff')">
                {{ selectedProject.status }}
              </span>
            </div>
          </div>
          <p *ngIf="selectedProject.description" class="detail-description">{{ selectedProject.description }}</p>
          <div *ngIf="selectedProject.geometry?.coordinates" class="detail-coords">
            📍 {{ selectedProject.geometry.coordinates[1].toFixed(5) }}, {{ selectedProject.geometry.coordinates[0].toFixed(5) }}
          </div>
          <div class="detail-actions">
            <button class="detail-btn detail-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>
              Edit
            </button>
            <button class="detail-btn detail-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 2v2"/></svg>
              Delete
            </button>
          </div>
        </ng-container>
      </div>
    </div>

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

  <!-- ── EXPLORE NAV (fixed footer) ── -->
  <div class="info-panel-footer"
    *ngIf="!showLocationsList && ((selectedDistrict && filteredDistricts.length > 1) || (selectedLocation?.category === 'GOVERNORATE' && filteredGovernorates.length > 1) || (selectedLocation && selectedLocation.category !== 'GOVERNORATE' && selectedLocation.category !== 'DISTRICT' && filteredLocations.length > 1))">
    <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"><path d="M15 18l-6-6 6-6"/></svg>
    </button>
    <span style="font-size:13px; color:rgba(255,255,255,0.6);">Explore More</span>
    <button class="nav-arrow" (click)="navigateNext()" [disabled]="shouldDisableNext()">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
    </button>
  </div>
</aside>
    </div>
