<?php 
// Set page title before including header
$pageTitle = "Organizational Hierarchy - Elementary & Secondary Education District Kotli";
include_once 'header_new.php'; 
?>

<div class="container-fluid px-4 py-4">
    <h1 class="text-center text-uppercase stylish-header mb-5"><strong>Organizational Hierarchy</strong></h1>
   
    <div class="org-chart-container">
        <!-- Government of AJK Level -->
        <div class="level level-0">
            <div class="level-label">Government of Azad Jammu & Kashmir</div>
        </div>
        
        <div class="level-connector">
            <div class="connector-line vertical"></div>
            <div class="connector-arrow">↓</div>
        </div>
        
        <!-- Top Level (Prime Minister) -->
        <div class="level level-1">
            <div class="position-card-wrapper">
                <div class="position-card position-card-primary">
                    <div class="card">
                        <div class="card-body text-center p-4">
                            <div class="position-badge">PRIME MINISTER</div>
                            <div class="position-image-wrapper">
                                <img src="images/PM.jpg" alt="Prime Minister" class="img-fluid rounded-circle">
                            </div>
                            <h4 class="position-name mt-4 mb-2">Raja Faisal Mumtaz Rathore</h4>
                            <p class="position-title">Prime Minister</p>
                            <div class="position-details">
                                <small class="text-muted">Azad Jammu & Kashmir</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="level-connector">
            <div class="connector-line vertical"></div>
            <div class="connector-arrow">↓</div>
        </div>
        
        <!-- Second Level (Minister) -->
        <div class="level level-2">
            <div class="level-label">Elementary & Secondary Education Department</div>
            <div class="position-card-wrapper">
                <div class="position-card position-card-secondary">
                    <div class="card">
                        <div class="card-body text-center p-3">
                            <div class="position-badge">EDUCATION MINISTER</div>
                            <div class="position-image-wrapper">
                                <img src="images/Minister.jpg" alt="Minister" class="img-fluid rounded-circle">
                            </div>
                            <h5 class="position-name mt-3 mb-2">Mr. Diwan Ali Chugtai</h5>
                            <p class="position-title">Minister</p>
                            <div class="position-details">
                                <small class="text-muted">Elementary & Secondary Education</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="level-connector">
            <div class="connector-line vertical"></div>
            <div class="connector-arrow">↓</div>
        </div>
        
        <!-- Third Level (Chief Secretary) - NOW UNDER MINISTER -->
        <div class="level level-3">
            <div class="level-label">Chief Secretariat</div>
            <div class="position-card-wrapper">
                <div class="position-card position-card-chief">
                    <div class="card">
                        <div class="card-body text-center p-3">
                            <div class="position-badge">CHIEF SECRETARY</div>
                            <div class="position-image-wrapper">
                                <img src="images/chief_secretary.jpg" alt="Chief Secretary" class="img-fluid rounded-circle">
                            </div>
                            <h5 class="position-name mt-3 mb-2">Mr. Khushal Khan. SI ,T.St</h5>
                            <p class="position-title">Chief Secretary</p>
                            <div class="position-details">
                                <small class="text-muted">Government of Azad Jammu & Kashmir</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="level-connector">
            <div class="connector-line vertical"></div>
            <div class="connector-arrow">↓</div>
        </div>
        
        <!-- Fourth Level (Secretary) -->
        <div class="level level-4">
            <div class="level-label">Administrative Leadership</div>
            <div class="position-card-wrapper">
                <div class="position-card position-card-tertiary">
                    <div class="card">
                        <div class="card-body text-center p-3">
                            <div class="position-badge">SECRETARY EDUCATION</div>
                            <div class="position-image-wrapper">
                                <img src="images/Secretary.jpg" alt="Secretary" class="img-fluid rounded-circle">
                            </div>
                            <h5 class="position-name mt-3 mb-2">Mr. Anayat Ali</h5>
                            <p class="position-title">Secretary</p>
                            <div class="position-details">
                                <small class="text-muted">Elementary & Secondary Education Department</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="level-connector">
            <div class="connector-line vertical"></div>
            <div class="connector-line horizontal"></div>
            <div class="connector-line vertical"></div>
            <div class="connector-arrow">↓</div>
        </div>
        
        <!-- Fifth Level (Directors) -->
        <div class="level level-5">
            <div class="level-label">Directorate Level</div>
            <div class="position-row">
                <div class="position-card position-card-director">
                    <div class="card">
                        <div class="card-body text-center p-3">
                            <div class="position-badge">DPI MALE</div>
                            <div class="position-image-wrapper">
                                <img src="images/DPI_m.jpg" alt="DPI Male" class="img-fluid rounded-circle">
                            </div>
                            <h5 class="position-name mt-3 mb-2">DPI Name</h5>
                            <p class="position-title">Director Public Instruction (Male)</p>
                            <div class="position-details">
                                <small class="text-muted">Elementary & Secondary Education</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="position-card position-card-director">
                    <div class="card">
                        <div class="card-body text-center p-3">
                            <div class="position-badge">DPI FEMALE</div>
                            <div class="position-image-wrapper">
                                <img src="images/DPI_f.jpg" alt="DPI Female" class="img-fluid rounded-circle">
                            </div>
                            <h5 class="position-name mt-3 mb-2">DPI Name</h5>
                            <p class="position-title">Director Public Instruction (Female)</p>
                            <div class="position-details">
                                <small class="text-muted">Elementary & Secondary Education</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="level-connector">
            <div class="connector-line vertical"></div>
            <div class="connector-line horizontal"></div>
            <div class="connector-line vertical"></div>
            <div class="connector-arrow">↓</div>
        </div>
        
        <!-- Sixth Level (Deputy Directors) -->
        <div class="level level-6">
            <div class="level-label">Divisional Directors Level</div>
            <div class="position-row">
                <div class="position-card position-card-deputy">
                    <div class="card">
                        <div class="card-body text-center p-3">
                            <div class="position-badge">DDS MALE</div>
                            <div class="position-image-wrapper">
                                <img src="images/DDS_m.jpg" alt="DDS Male" class="img-fluid rounded-circle">
                            </div>
                            <h5 class="position-name mt-3 mb-2">Syed Takhleeq UL Zaman</h5>
                            <p class="position-title">Divisional Director Schools (Male)</p>
                            <div class="position-details">
                                <small class="text-muted">Elementary & Secondary Education</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="position-card position-card-deputy">
                    <div class="card">
                        <div class="card-body text-center p-3">
                            <div class="position-badge">DDS FEMALE</div>
                            <div class="position-image-wrapper">
                                <img src="images/DDS_f.jpg" alt="DDS Female" class="img-fluid rounded-circle">
                            </div>
                            <h5 class="position-name mt-3 mb-2">DDS Name</h5>
                            <p class="position-title">Divisional Director Schools (Female)</p>
                            <div class="position-details">
                                <small class="text-muted">Elementary & Secondary Education</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="level-connector">
            <div class="connector-line vertical"></div>
            <div class="connector-line horizontal"></div>
            <div class="connector-line vertical"></div>
            <div class="connector-arrow">↓</div>
        </div>
        
        <!-- Seventh Level (District Officers - Kotli District) -->
        <div class="level level-7">
            <div class="level-label">District Education Officers - Kotli</div>
            <div class="department-banner">
                <div class="banner-content">
                    <h4 class="mb-0">Elementary & Secondary Education District Kotli</h4>
                    <p class="mb-0">Azad Jammu & Kashmir</p>
                </div>
            </div>
            <div class="position-row mt-4">
                <div class="position-card position-card-district">
                    <div class="card">
                        <div class="card-body text-center p-3">
                            <div class="position-badge">DISTRICT EDUCATION OFFICER MALE</div>
                            <div class="position-image-wrapper">
                                <img src="images/DEO_M.jpg" alt="DEO Male" class="img-fluid rounded-circle">
                            </div>
                            <h5 class="position-name mt-3 mb-2">Syed Jamshed Bukhari</h5>
                            <p class="position-title">District Education Officer (Male)</p>
                            <div class="position-details">
                                <small class="text-muted">Elementary & Secondary Education</small>
                                <div class="district-tag">Kotli District</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="position-card position-card-district">
                    <div class="card">
                        <div class="card-body text-center p-3">
                            <div class="position-badge">DISTRICT EDUCATION OFFICER FEMALE</div>
                            <div class="position-image-wrapper">
                                <img src="images/DEO_f.jpg" alt="DEO Female" class="img-fluid rounded-circle">
                            </div>
                            <h5 class="position-name mt-3 mb-2">Miss. Saeeda Andleeb</h5>
                            <p class="position-title">District Education Officer (Female)</p>
                            <div class="position-details">
                                <small class="text-muted">Elementary & Secondary Education</small>
                                <div class="district-tag">Kotli District</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="level-connector">
            <div class="connector-line vertical"></div>
            <div class="connector-line horizontal"></div>
            <div class="connector-line vertical"></div>
            <div class="connector-arrow">↓</div>
        </div>
        
        <!-- Eighth Level (Deputy District Officers) -->
        <div class="level level-8">
            <div class="level-label">Deputy District Education Officers - Kotli</div>
            <div class="position-row">
                <div class="position-card position-card-deputy-district">
                    <div class="card">
                        <div class="card-body text-center p-3">
                            <div class="position-badge">DEPUTY DEO MALE</div>
                            <div class="position-image-wrapper">
                                <img src="images/ddo_m.jpg" alt="Deputy DEO Male" class="img-fluid rounded-circle">
                            </div>
                            <h5 class="position-name mt-3 mb-2">Mr. Hamza Ali Syed</h5>
                            <p class="position-title">Deputy District Education Officer (Male)</p>
                            <div class="position-details">
                                <small class="text-muted">Kotli District</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="position-card position-card-deputy-district">
                    <div class="card">
                        <div class="card-body text-center p-3">
                            <div class="position-badge">DEPUTY DEO FEMALE</div>
                            <div class="position-image-wrapper">
                                <img src="images/ddo_f.jpg" alt="Deputy DEO Female" class="img-fluid rounded-circle">
                            </div>
                            <h5 class="position-name mt-3 mb-2">Sardar M. Idrees</h5>
                            <p class="position-title">Deputy District Education Officer (Female)</p>
                            <div class="position-details">
                                <small class="text-muted">Kotli District</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- AEOs Section - Placed directly under each Deputy DEO -->
            <div class="aeos-container">
                <!-- Male AEOs under Male Deputy DEO -->
                <div class="aeo-column">
                    <div class="ddo-connector">
                        <div class="connector-line vertical short"></div>
                        <div class="connector-label">Supervises</div>
                    </div>
                    <div class="aeo-header">
                        <h6>Assistant Education Officers (Male)</h6>
                        <small class="text-muted">Under Deputy DEO (Male)</small>
                    </div>
                    <div class="aeos-grid compact">
                        <?php 
                        // Male AEOs - circle 1 to 9 with area names
                        $maleAEOs = [
                            1 => ["name" => "M.Asif", "area" => "Rajmahal"],
                            2 => ["name" => "AEO Male 2", "area" => "Fatehpur Thakiala"],
                            3 => ["name" => "AEO Male 3", "area" => "Kotli City"],
                            4 => ["name" => "AEO Male 4", "area" => "Sehnsa"],
                            5 => ["name" => "AEO Male 5", "area" => "Charhoi"],
                            6 => ["name" => "AEO Male 6", "area" => "Khuiratta"],
                            7 => ["name" => "AEO Male 7", "area" => "Giyaien Khad"],
                            8 => ["name" => "AEO Male 8", "area" => "Srsawa"],
                            9 => ["name" => "AEO Male 9", "area" => "Sarhota Dungi"]
                        ];
                        
                        foreach($maleAEOs as $circle => $aeo): 
                            // Try different image formats if the exact one doesn't exist
                            $imagePath = "images/aeo_images/male/aeo{$circle}_m.jpg";
                            // Also try .png and .jpeg formats
                            $altImage1 = "images/aeo{$circle}_m.png";
                            $altImage2 = "images/aeo{$circle}_m.jpeg";
                            // Also try images in root folder
                            $rootImage1 = "images/aeo{$circle}_m.jpg";
                            $rootImage2 = "images/aeo{$circle}_m.png";
                            $rootImage3 = "images/aeo{$circle}_m.jpeg";
                            // Fallback to default male image if specific image doesn't exist
                            $actualImage = "images/aeo_m.jpg";
                            
                            if (file_exists($imagePath)) {
                                $actualImage = $imagePath;
                            } elseif (file_exists($altImage1)) {
                                $actualImage = $altImage1;
                            } elseif (file_exists($altImage2)) {
                                $actualImage = $altImage2;
                            } elseif (file_exists($rootImage1)) {
                                $actualImage = $rootImage1;
                            } elseif (file_exists($rootImage2)) {
                                $actualImage = $rootImage2;
                            } elseif (file_exists($rootImage3)) {
                                $actualImage = $rootImage3;
                            }
                        ?>
                        <div class="aeo-card compact">
                            <div class="card">
                                <div class="card-body text-center p-1">
                                    <div class="position-image-wrapper xsmall">
                                        <img src="<?php echo $actualImage; ?>" alt="<?php echo $aeo['name']; ?> - AEO circle <?php echo $circle; ?> (<?php echo $aeo['area']; ?>)" class="img-fluid rounded-circle">
                                    </div>
                                    <h6 class="position-name mt-1 mb-0"><?php echo $aeo['name']; ?></h6>
                                    <p class="position-title small">AEO</p>
                                    <div class="position-details">
                                        <small class="text-muted d-block">circle <?php echo $circle; ?> (<?php echo $aeo['area']; ?>)</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                
                <!-- Female AEOs under Female Deputy DEO -->
                <div class="aeo-column">
                    <div class="ddo-connector">
                        <div class="connector-line vertical short"></div>
                        <div class="connector-label">Supervises</div>
                    </div>
                    <div class="aeo-header">
                        <h6>Assistant Education Officers (Female)</h6>
                        <small class="text-muted">Under Deputy DEO (Female)</small>
                    </div>
                    <div class="aeos-grid compact">
                        <?php 
                        // Female AEOs - circle 1 to 9 with area names
                        $femaleAEOs = [
                            1 => ["name" => "Rashid Younis", "area" => "Rajmahal"],
                            2 => ["name" => "AEO Female 2", "area" => "Fatehpur Thakiala"],
                            3 => ["name" => "AEO Female 3", "area" => "Kotli City"],
                            4 => ["name" => "AEO Female 4", "area" => "Sehnsa"],
                            5 => ["name" => "AEO Female 5", "area" => "Charhoi"],
                            6 => ["name" => "AEO Female 6", "area" => "Khuiratta"],
                            7 => ["name" => "AEO Female 7", "area" => "Giyaien Khad"],
                            8 => ["name" => "AEO Female 8", "area" => "Sarsawa"],
                            9 => ["name" => "AEO Female 9", "area" => "Sarhota Dungi"]
                        ];
                        
                        foreach($femaleAEOs as $circle => $aeo): 
                            // Try different image formats if the exact one doesn't exist
                            $imagePath = "images/aeo_images/female/aeo{$circle}_f.jpg";
                            // Also try .png and .jpeg formats
                            $altImage1 = "images/aeo{$circle}_f.png";
                            $altImage2 = "images/aeo{$circle}_f.jpeg";
                            // Also try images in root folder
                            $rootImage1 = "images/aeo{$circle}_f.jpg";
                            $rootImage2 = "images/aeo{$circle}_f.png";
                            $rootImage3 = "images/aeo{$circle}_f.jpeg";
                            // Fallback to default female image if specific image doesn't exist
                            $actualImage = "images/aeo_f.jpg";
                            
                            if (file_exists($imagePath)) {
                                $actualImage = $imagePath;
                            } elseif (file_exists($altImage1)) {
                                $actualImage = $altImage1;
                            } elseif (file_exists($altImage2)) {
                                $actualImage = $altImage2;
                            } elseif (file_exists($rootImage1)) {
                                $actualImage = $rootImage1;
                            } elseif (file_exists($rootImage2)) {
                                $actualImage = $rootImage2;
                            } elseif (file_exists($rootImage3)) {
                                $actualImage = $rootImage3;
                            }
                        ?>
                        <div class="aeo-card compact">
                            <div class="card">
                                <div class="card-body text-center p-1">
                                    <div class="position-image-wrapper xsmall">
                                        <img src="<?php echo $actualImage; ?>" alt="<?php echo $aeo['name']; ?> - AEO circle <?php echo $circle; ?> (<?php echo $aeo['area']; ?>)" class="img-fluid rounded-circle" loading="lazy">
                                    </div>
                                    <h6 class="position-name mt-1 mb-0"><?php echo $aeo['name']; ?></h6>
                                    <p class="position-title small">AEO</p>

                                    <div class="position-details">
                                        <small class="text-muted d-block">circle <?php echo $circle; ?> (<?php echo $aeo['area']; ?>)</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Main Container */
    .org-chart-container {
        max-width: 1600px;
        margin: 0 auto;
        position: relative;
        padding: 20px;
        background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
        border-radius: 10px;
        box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    }
    
    /* Department Banner */
    .department-banner {
        background: linear-gradient(135deg, #0d6efd, #084298);
        color: white;
        padding: 15px 20px;
        border-radius: 8px;
        margin: 20px auto;
        max-width: 600px;
        text-align: center;
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
    }
    
    .banner-content h4 {
        font-weight: 600;
        font-size: 1.4rem;
        margin-bottom: 5px;
    }
    
    .banner-content p {
        font-size: 0.9rem;
        opacity: 0.9;
    }
    
    /* Level Labels */
    .level-label {
        text-align: center;
        font-size: 0.9rem;
        color: #495057;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        margin-bottom: 20px;
        position: relative;
        padding: 5px 0;
    }
    
    .level-label:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 2px;
        background: linear-gradient(90deg, transparent, #0d6efd, transparent);
    }
    
    /* Levels */
    .level {
        margin: 40px 0;
        position: relative;
    }
    
    .level-0 {
        margin: 20px 0 30px;
    }
    
    .level-0 .level-label {
        font-size: 1rem;
        color: #0d6efd;
        font-weight: 700;
    }
    
    /* Position Cards */
    .position-card-wrapper {
        display: flex;
        justify-content: center;
    }
    
    .position-row {
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
    }
    
    .position-card {
        min-width: 280px;
        transition: all 0.3s ease;
        position: relative;
    }
    
    .position-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    }
    
    /* Different Card Types */
    .position-card-primary .card {
        border: 2px solid #0d6efd;
        border-top: 5px solid #0d6efd;
        background: linear-gradient(135deg, #f8fbff, #fff);
    }
    
    .position-card-chief .card {
        border: 2px solid #17a2b8;
        border-top: 5px solid #17a2b8;
        background: linear-gradient(135deg, #e3f2fd, #fff);
    }
    
    .position-card-secondary .card {
        border: 2px solid #6f42c1;
        border-top: 5px solid #6f42c1;
        background: linear-gradient(135deg, #f8f5ff, #fff);
    }
    
    .position-card-tertiary .card {
        border: 2px solid #198754;
        border-top: 5px solid #198754;
        background: linear-gradient(135deg, #f0f9f5, #fff);
    }
    
    .position-card-director .card {
        border: 2px solid #fd7e14;
        border-top: 5px solid #fd7e14;
        background: linear-gradient(135deg, #fff4e6, #fff);
    }
    
    .position-card-deputy .card {
        border: 2px solid #20c997;
        border-top: 5px solid #20c997;
        background: linear-gradient(135deg, #e6f7f2, #fff);
    }
    
    .position-card-district .card {
        border: 2px solid #dc3545;
        border-top: 5px solid #dc3545;

        background: linear-gradient(135deg, #fff0f0, #fff);
    }
    
    .position-card-deputy-district .card {
        border: 2px solid #6c757d;
        border-top: 5px solid #6c757d;
        background: linear-gradient(135deg, #f8f9fa, #fff);
    }
    
    /* Chief Secretary Badge */
    .position-card-chief .position-badge {
        background: linear-gradient(135deg, #17a2b8, #138496);
    }
    
    /* Compact AEO Cards */
    .aeo-card.compact .card {
        border: 1px solid #dee2e6;
        border-top: 2px solid #adb5bd;
        background: linear-gradient(135deg, #f8f9fa, #fff);
        height: 100%;
        border-radius: 6px;
    }
    
    .aeo-card.compact:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(0,0,0,0.1) !important;
    }
    
    /* AEOs Container */
    .aeos-container {
        display: flex;
        justify-content: center;
        gap: 40px;
        margin-top: 30px;
        padding: 20px 0;
        flex-wrap: wrap;
    }
    
    .aeo-column {
        flex: 1;
        min-width: 300px;
        max-width: 600px;
    }
    
    /* DDO Connector */
    .ddo-connector {
        text-align: center;
        margin-bottom: 10px;
        position: relative;
    }
    
    .ddo-connector .connector-line.vertical.short {
        height: 15px;
        width: 1px;
        background: linear-gradient(180deg, #6c757d, #adb5bd);
        margin: 0 auto 5px;
    }
    
    .connector-label {
        font-size: 0.7rem;
        color: #6c757d;
        font-style: italic;
        margin-bottom: 10px;
    }
    
    /* AEO Header */
    .aeo-header {
        text-align: center;
        margin-bottom: 15px;
        padding: 8px 15px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 3px solid #0d6efd;
    }
    
    .aeo-header h6 {
        color: #495057;
        font-weight: 600;
        margin-bottom: 2px;
        font-size: 0.9rem;
    }
    
    .aeo-header small {
        font-size: 0.75rem;
    }
    
    /* Compact AEOs Grid */
    .aeos-grid.compact {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        justify-content: center;
    }
    
    /* Position Badge */
    .position-badge {
        display: inline-block;
        padding: 4px 12px;
        color: white;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .position-card-primary .position-badge {
        background: linear-gradient(135deg, #0d6efd, #0853c7);
    }
    
    .position-card-secondary .position-badge {
        background: linear-gradient(135deg, #6f42c1, #563d7c);
    }
    
    .position-card-tertiary .position-badge {
        background: linear-gradient(135deg, #198754, #146c43);
    }
    
    .position-card-director .position-badge {
        background: linear-gradient(135deg, #fd7e14, #e96c0c);
    }
    
    .position-card-deputy .position-badge {
        background: linear-gradient(135deg, #20c997, #1ba87e);
    }
    
    .position-card-district .position-badge {
        background: linear-gradient(135deg, #dc3545, #c82333);
    }
    
    .position-card-deputy-district .position-badge {
        background: linear-gradient(135deg, #6c757d, #545b62);
    }
    
    /* Image Styling */
    .position-image-wrapper {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        position: relative;
    }
    
    .position-image-wrapper.xsmall {
        width: 60px;
        height: 60px;
    }
    
    .position-image-wrapper.small {
        width: 70px;
        height: 70px;
    }
    
    .position-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 2px solid white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .position-image-wrapper.xsmall img {
        border: 1.5px solid white;
    }
    
    .position-card-primary .position-image-wrapper {
        width: 140px;
        height: 140px;
    }
    
    .position-card-primary .position-image-wrapper img {
        border: 4px solid white;
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }
    
    /* Position Name & Title - Compact */
    .position-name {
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 5px;
        font-size: 0.85rem;
    }
    
    .aeo-card.compact .position-name {
        font-size: 0.75rem;
        margin-bottom: 2px;
    }
    
    .position-title {
        color: #495057;
        font-weight: 500;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }
    
    .position-title.small {
        font-size: 0.7rem;
        margin-bottom: 5px;
    }
    
    .position-details {
        margin-top: 10px;
        font-size: 0.75rem;
    }
    
    .aeo-card.compact .position-details {
        margin-top: 5px;
        font-size: 0.65rem;
    }
    
    .district-tag {
        display: inline-block;
        background: linear-gradient(135deg, #0d6efd, #084298);
        color: white;
        padding: 3px 12px;
        border-radius: 12px;
        margin-top: 8px;
        font-size: 0.75rem;
        font-weight: 500;
        box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2);
    }
    
    /* Area text styling */
    .position-details .text-muted.d-block {
        line-height: 1.2;
        min-height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Connector Lines */
    .level-connector {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        position: relative;
    }
    
    .connector-line {
        background: linear-gradient(180deg, #0d6efd, #6c757d);
    }
    
    .connector-line.vertical {
        width: 2px;
        height: 40px;
    }
    
    .connector-line.horizontal {
        width: 200px;
        height: 2px;
        margin: 0 10px;
    }
    
    .connector-line.horizontal.expanded {
        width: 400px;
    }
    
    .connector-arrow {
        color: #0d6efd;
        font-size: 1.2rem;
        position: absolute;
        bottom: -5px;
        z-index: 1;
        font-weight: bold;
    }
    
    /* Responsive Design */
    @media (max-width: 1200px) {
        .position-card {
            min-width: 250px;
        }
        
        .connector-line.horizontal {
            width: 150px;
        }
        
        .department-banner {
            max-width: 500px;
        }
        
        .banner-content h4 {
            font-size: 1.2rem;
        }
        
        .aeos-grid.compact {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    
    @media (max-width: 992px) {
        .aeos-container {
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }
        
        .aeo-column {
            width: 100%;
            max-width: 700px;
        }
        
        .aeos-grid.compact {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    
    @media (max-width: 768px) {
        .position-row {
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        .position-card {
            width: 100%;
            max-width: 300px;
        }
        
        .connector-line.horizontal {
            width: 100px;
        }
        
        .aeos-grid.compact {
            grid-template-columns: repeat(3, 1fr);
        }
        
        .level-label:after {
            width: 60px;
        }
        
        .department-banner {
            max-width: 90%;
            padding: 12px 15px;
        }
        
        .banner-content h4 {
            font-size: 1.1rem;
        }
        
        .aeo-header {
            padding: 6px 12px;
        }
        
        .aeo-header h6 {
            font-size: 0.85rem;
        }
    }
    
    @media (max-width: 576px) {
        .aeos-grid.compact {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .position-card-primary .position-image-wrapper {
            width: 120px;
            height: 120px;
        }
        
        .connector-line.horizontal {
            width: 50px;
        }
        
        .banner-content h4 {
            font-size: 1rem;
        }
        
        .banner-content p {
            font-size: 0.8rem;
        }
        
        .aeo-column {
            min-width: 250px;
        }
        
        .position-details .text-muted.d-block {
            min-height: 40px;
            font-size: 0.6rem;
        }
    }
    
    @media (max-width: 400px) {
        .aeos-grid.compact {
            grid-template-columns: 1fr;
        }
        
        .position-image-wrapper.xsmall {
            width: 50px;
            height: 50px;
        }
        
        .position-details .text-muted.d-block {
            min-height: auto;
        }
    }
    
    /* Print Styles */
    @media print {
        .org-chart-container {
            box-shadow: none;
            background: white;
            padding: 10px;
        }
        
        .position-card:hover {
            transform: none;
            box-shadow: none !important;
        }
        
        .position-card .card {
            break-inside: avoid;
        }
        
        .aeos-container {
            break-inside: avoid;
        }
        
        .level-connector {
            display: none;
        }
        
        .department-banner {
            background: #f0f0f0;
            color: black;
            box-shadow: none;
        }
    }
</style>

<?php include_once 'footer_new.php'; ?>