<!-- Page loader overlay -->

<div id="page-loader">

  <div class="pl-logo">

    <?php echo isset($school_name) ? htmlspecialchars($school_name) : 'Loading...'; ?>

  </div>

  <div class="pl-bar-track">

    <div class="pl-bar-fill"></div>

  </div>

</div>



<style>
  :root {

    --mini-nav-bg: rgba(255, 255, 255, 0.85);

    --mini-accent: #4338ca;

    /* Indigo established in our previous step */

    --accent-blue: #4338ca;

    --mini-text: #1e293b;

    --mini-glass-border: rgba(255, 255, 255, 0.4);

  }



  /* 2026 Floating Navbar for Mini Admin */

  .main-header.navbar {

    border-radius: 16px !important;

    border: 1px solid var(--mini-glass-border) !important;

    background: var(--mini-nav-bg) !important;

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);

    padding: 0.6rem 1.2rem;

    transition: all 0.3s ease;

  }





  /* Clean Search Bar */

  .mini-search-wrapper {

    background: #f1f5f9;

    border-radius: 10px;

    padding: 4px 12px;

    display: flex;

    align-items: center;

    border: 1px solid transparent;

    transition: 0.2s ease;

  }



  .mini-search-wrapper:focus-within {

    background: #fff;

    border-color: var(--mini-accent);

    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.1);

  }



  .mini-search-wrapper input {

    border: none;

    background: transparent;

    outline: none;

    font-size: 0.9rem;

    color: var(--mini-text);

    margin-left: 8px;

  }



  /* Modern Dropdown */

  .dropdown-menu-lg {

    min-width: 240px !important;

    border: none !important;

    border-radius: 18px !important;

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    margin-top: 12px !important;

    padding: 8px;

  }



  .dropdown-item {

    border-radius: 10px;

    padding: 10px 15px;

    color: #475569;

    font-weight: 500;

    transition: all 0.2s;

    display: flex;

    align-items: center;

  }



  .dropdown-item i {

    font-size: 1.1rem;

    width: 25px;

    transition: 0.2s;

  }



  .dropdown-item:hover {

    background: #f8fafc;

    color: var(--mini-accent);

    padding-left: 20px;

    /* Subtle slide effect */

  }



  .dropdown-item:hover i {

    color: var(--mini-accent);

  }



  /* Professional Logout Styling */

  .logout-item:hover {

    background: #fff1f2 !important;

    color: #e11d48 !important;

  }



  /* Custom Loader 2026 */

  #loader {

    background: rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(8px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

  }



  .spinner {

    width: 40px;

    height: 40px;

    border: 3px solid #f3f3f3;

    border-top: 3px solid var(--accent-blue);

    border-radius: 50%;

    animation: spin 1s linear infinite;

  }



  @keyframes spin {

    0% {

      transform: rotate(0deg);

    }



    100% {

      transform: rotate(360deg);

    }

  }
</style>



<nav class="main-header navbar navbar-expand">

  <ul class="navbar-nav">

    <li class="nav-item">

      <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-stream text-muted"></i></a>

    </li>

    <li class="nav-item d-none d-sm-inline-block">

      <a href="dashboard1.php" class="nav-link" style="color: var(--mini-text); font-weight: 600;">Dashboard</a>

    </li>

  </ul>



  <form class="form-inline ml-3 d-none d-md-block" onsubmit="return false;" style="position:relative;">

    <div class="mini-search-wrapper">

      <i class="fas fa-search text-muted" style="font-size: 0.85rem;"></i>

      <input type="search" id="navSearch2" placeholder="Quick search..." aria-label="Search" autocomplete="off">

    </div>

    <div id="navSearchResults2" class="dropdown-menu dropdown-menu-lg"
      style="display:none; position:absolute; top:100%; left:0; min-width:260px; z-index:9999;"></div>

  </form>



  <ul class="navbar-nav ml-auto">

    <li class="nav-item dropdown">

      <a class="nav-link d-flex align-items-center" data-toggle="dropdown" href="#">

        <div
          style="width: 32px; height: 32px; border-radius: 8px; background: #eef2ff; color: var(--mini-accent); display: flex; align-items: center; justify-content: center;">

          <i class="fas fa-user-circle"></i>

        </div>

        <i class="fas fa-chevron-down ml-2" style="font-size: 0.7rem; color: #94a3b8;"></i>

      </a>

      <div class="dropdown-menu dropdown-menu-right">

        <a href="profile1.php" class="dropdown-item">

          <i class="far fa-id-badge mr-2"></i> My Profile

        </a>

        <a href="changepassword1.php" class="dropdown-item">

          <i class="fas fa-key mr-2"></i> Security Settings

        </a>

        <div class="dropdown-divider" style="margin: 8px 15px; opacity: 0.5;"></div>

        <a href="logoutmini.php" class="dropdown-item logout-item">

          <i class="fas fa-sign-out-alt mr-2"></i> Sign Out

        </a>

      </div>

    </li>

  </ul>

</nav>





<script>

  (function () {

    let t;

    const input = document.getElementById('navSearch2');

    const box = document.getElementById('navSearchResults2');

    if (!input) return;

    input.addEventListener('input', function () {

      clearTimeout(t);

      const q = this.value.trim();

      if (q.length < 2) { box.style.display = 'none'; return; }

      t = setTimeout(() => {

        fetch('includes/search.php?role=admin2&q=' + encodeURIComponent(q))

          .then(r => r.json())

          .then(data => {

            if (!data.results.length) {

              box.innerHTML = '<span class="dropdown-item text-muted text-center">No results found</span>';

            } else {

              box.innerHTML = data.results.map(r =>

                `<a href="${r.url}" class="dropdown-item">

                <i class="${r.icon} mr-2" style="color:var(--mini-accent)"></i>

                <span><strong style="display:block;font-size:.85rem">${r.label}</strong>

                <small class="text-muted">${r.sub}${r.detail ? ' — ' + r.detail : ''}</small></span>

              </a>`

              ).join('');

            }

            box.style.display = 'block';

          });

      }, 280);

    });

    document.addEventListener('click', e => {

      if (!input.contains(e.target) && !box.contains(e.target)) box.style.display = 'none';

    });

  })();

</script>