  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(to right, #e0fff4, #ffffff);
      height: 100vh;
    }

    .profile-page {
      display: flex;
      height: 100vh;
      width: 100%;
    }

    .profile-sidebar {
      width: 300px;
      background: #009688; /* Teal */
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 20px;
    }

    .profile-sidebar img {
      object-fit: cover;
      border-radius: 50%;
      border: 4px solid #fff;
      margin-bottom: 20px;
    }

    .profile-sidebar .school-logo {
      width: 80px;
      height: 80px;
      border-radius: 10px;
      object-fit: contain;
      background: #fff;
      padding: 6px;
      border: 2px solid #fff;
      margin-bottom: 25px;
    }

    .profile-sidebar h4 {
      margin: 5px 0;
      font-weight: 600;
    }

    .profile-sidebar p {
      font-size: 14px;
      font-style: italic;
      color: #d4f3ea;
    }

    .profile-content {
      flex: 1;
      padding: 50px;
      overflow-y: auto;
    }

    .profile-content h3 {
      margin-bottom: 30px;
      font-weight: bold;
    }

    .profile-content .info-item {
      margin-bottom: 15px;
      font-size: 16px;
    }

    .profile-content .info-item i {
      width: 25px;
      color: #009688;
    }

    .profile-content .info-item span {
      margin-left: 10px;
      color: #444;
    }

    @media (max-width: 768px) {
      .profile-page {
        flex-direction: column;
      }

      .profile-sidebar {
        width: 100%;
        height: auto;
        flex-direction: row;
        justify-content: center;
        padding: 20px;
      }

      .profile-content {
        padding: 30px 20px;
      }

      .profile-sidebar .school-logo {
        margin-right: 20px;
      }
    }
  </style>
<div class="profile-page">
  <div class="profile-sidebar">
    <!-- School Logo with link -->
    <a href="dashboard.php" title="Back to Dashboard">
      <img src="../<?php echo $school_logo; ?>" alt="School Logo" class="school-logo">
    </a>

    <!-- Staff Passport -->
    <img class="img-circle" 
     src="../<?php echo htmlspecialchars($passport); ?>" 
     width="120" height="120" 
     alt="User Photo" 
     onerror="this.onerror=null; this.src='../uploads/students/none.jpg';">

    <h4><?php echo $staff_username; ?></h4>
    <h4><?php echo $full_name; ?></h4>
    <p><?php echo $role_name; ?></p>
  </div>

  <div class="profile-content">
    <h3>Staff Profile Details</h3>

    <div class="info-item"><i class="fas fa-phone-alt"></i><strong>Phone:</strong><span><?php echo $staff_phone; ?></span></div>
    <div class="info-item"><i class="fas fa-envelope"></i><strong>Email:</strong><span><?php echo $staff_email; ?></span></div>
    <div class="info-item"><i class="fas fa-map-marker-alt"></i><strong>Address:</strong><span><?php echo $staff_address; ?></span></div>
    <div class="info-item"><i class="fas fa-venus-mars"></i><strong>Sex:</strong><span><?php echo $staff_gender; ?></span></div>
    <div class="info-item"><i class="fas fa-flag"></i><strong>Nationality:</strong><span><?php echo $staff_nationality; ?></span></div>
    <div class="info-item"><i class="fas fa-globe-africa"></i><strong>State:</strong><span><?php echo $staff_state; ?></span></div>
    <div class="info-item"><i class="fas fa-map"></i><strong>LGA:</strong><span><?php echo $staff_lga; ?></span></div>
    <div class="info-item"><i class="fas fa-book"></i><strong>Term:</strong><span><?php echo $current_term; ?></span></div>
    <div class="info-item"><i class="fas fa-calendar"></i><strong>Session:</strong><span><?php echo $current_session; ?></span></div>
  </div>
</div>
