<!-- 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 {

    --hdr-bg: rgba(255, 255, 255, 0.82);

    --hdr-accent: #64748b;

    /* Sophisticated Slate */

    --hdr-text: #334155;

    --hdr-border: rgba(226, 232, 240, 0.6);

    --accent-blue: #64748b;

  }



  /* Floating Navigation bar */

  .main-header.navbar {

    border-radius: 18px !important;

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

    background: var(--hdr-bg) !important;

    backdrop-filter: blur(15px);

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

    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.05);

    padding: 0.6rem 1.2rem;

    transition: all 0.3s ease;

  }





  /* Modern Pill Search */

  .search-pill-wrapper {

    background: #f1f5f9;

    border-radius: 50px;

    padding: 6px 16px;

    display: flex;

    align-items: center;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    border: 1px solid transparent;

  }



  .search-pill-wrapper:focus-within {

    background: #ffffff;

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

    box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.1);

    width: 250px;

    /* Expands slightly on focus */

  }



  .search-pill-wrapper input {

    border: none;

    background: transparent;

    outline: none;

    font-size: 0.85rem;

    margin-left: 10px;

    width: 100%;

    color: var(--hdr-text);

  }



  /* User Dropdown Refinement */

  .dropdown-menu-lg {

    border-radius: 20px !important;

    border: 1px solid #f1f5f9 !important;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;

    margin-top: 15px !important;

    padding: 10px !important;

  }



  .dropdown-item {

    border-radius: 12px;

    padding: 12px 18px;

    font-weight: 500;

    color: #475569;

    transition: all 0.2s;

    margin-bottom: 2px;

  }



  .dropdown-item:hover {

    background: #f8fafc;

    color: var(--hdr-accent);

    transform: scale(1.02);

  }



  .dropdown-item i {

    color: #94a3b8;

    transition: color 0.2s;

  }



  .dropdown-item:hover i {

    color: var(--hdr-accent);

  }



  /* 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"></i></a>

    </li>

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

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

    </li>

  </ul>



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

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

      <i class="fas fa-search text-muted"></i>

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

    </div>

    <div id="navSearchResults3" 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" data-toggle="dropdown" href="#">

        <div
          style="background: #f1f5f9; padding: 6px 12px; border-radius: 12px; display: flex; align-items: center; gap: 8px;">

          <i class="far fa-user-circle" style="font-size: 1.2rem; color: var(--hdr-accent);"></i>

          <span class="d-none d-md-inline"
            style="font-size: 0.8rem; font-weight: 600; color: var(--hdr-text);">Account</span>

        </div>

      </a>

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

        <a href="#" class="dropdown-item">

          <i class="far fa-user mr-3"></i> Profile

        </a>

        <a href="#" class="dropdown-item">

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

        </a>

        <div class="dropdown-divider" style="border-top: 1px solid #f1f5f9; margin: 8px 0;"></div>

        <a href="logoutsmall.php" class="dropdown-item text-danger" style="background: rgba(239, 68, 68, 0.05);">

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

        </a>

      </div>

    </li>

  </ul>

</nav>





<script>

  (function () {

    let t;

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

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

    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=admin3&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(--hdr-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>