/* ==========================================================================
   Header + Navigation + Buttons
   ========================================================================== */

.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 99999;
  background: rgba(11,18,32,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.header-row{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  white-space: nowrap;
}

.brand-mark{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#07101f;
  font-weight: 900;
}

.brand-text{
  font-weight: 850;
  letter-spacing:.2px;
}

/* Nav */
.nav{
  position: relative; /* underline positioning */
  display:flex;
  align-items:center;
  gap: 18px;
  flex-wrap: nowrap;
  justify-content:flex-end;
  margin-left: auto;
  min-width: 0;
}

.nav-link{
  position: relative;
  padding: 6px 0;
  font-weight: 650;
  opacity: .92;
}
.nav-link:hover{ opacity: 1; }

.nav-link.active{
  opacity: 1;
  color: var(--accent2);
}

/* Underline that moves via JS */
.nav-underline{
  position: absolute;
  bottom: -10px;
  height: 3px;
  width: 0;
  left: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 4px;
  transition: left .22s ease, width .22s ease;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  font-weight: 750;
  transition: transform .08s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }
.btn:active{ transform: translateY(0); }

.btn-primary{
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#07101f;
}
.btn-secondary{ background: rgba(255,255,255,.06); }

/* Let Contact button look like a button while still being a nav-link */
.nav .btn{ padding: 10px 14px; }
.nav .btn.nav-link{ color:#07101f; opacity: 1; }

/* ==================================================
   Employee Login – Premium Glass Portal Button
   ================================================== */

.employee-login{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 42px;
  min-width: 42px;
  padding: 10px 14px;

  border-radius: 14px; /* subtle rounded rectangle */
  border: 1px solid rgba(255,255,255,.15);

  background:
    linear-gradient(145deg, rgba(110,168,255,.15), rgba(126,240,193,.12)),
    rgba(255,255,255,.05);

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

  color: #eaf1ff;
  text-decoration: none;

  box-shadow:
    0 4px 14px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.05);

  transition:
    transform .12s ease,
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.employee-login:hover{
  background: linear-gradient(135deg, #6ea8ff, #7ef0c1);
  color: #07101f;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  transform: translateY(-2px);
}
.employee-login:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.employee-login i{ font-size: 1.15rem; line-height: 1; }

.employee-login::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 60%);
  opacity:.25;
  pointer-events:none;
}

/* Dropdown menu tweaks */
.dropdown-toggle i { font-size: 1.2rem; }
.dropdown-item i {
  margin-right: 10px;
  font-size: 1.2rem;
}
.dropdown-menu{ min-width: 180px; }
.dropdown-item:hover{ background-color: rgba(0,0,0,0.1); }

/* Small screen nav tuning */
@media (max-width: 900px){
  :root{ --header-h: 92px; } /* extra space for wrapped nav */

  .header-row{
    align-items: flex-start;
    padding-top: 10px;
  }

  .nav{
    justify-content: flex-start;
    gap: 12px;
  }

  .nav-underline{ bottom: -8px; }
}

/* Safety: never show bullets in dropdown */
.dropdown-menu{
  list-style: none;
  padding-left: 0;
}

/* Right-side actions group in header */
.nav-actions{
  margin-left: auto;          /* ✅ pushes actions to far right */
  display:flex;
  align-items:center;
  gap: 10px;
  white-space: nowrap;
}

/* Make sure dropdown button doesn't inherit weird bootstrap padding */
.employee-login.dropdown-toggle{
  padding: 10px 14px;
}

/* Bullet-proof dropdown list */
.dropdown-menu{
  list-style: none;
  padding-left: 0;
}
/* ================================
   Admin + Site header: keep actions on the right
   ================================ */

/* Desktop: do NOT wrap nav. Keep actions inline at far right */
@media (min-width: 901px){
  .nav{
    flex-wrap: nowrap !important;
  }

  .nav-actions{
    margin-left: auto;              /* pushes to right */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  }
}

/* Remove Bootstrap caret on lock button */
.employee-login.dropdown-toggle::after{
  display:none !important;
}

/* =========================
   Dropdown (no Bootstrap CSS)
   ========================= */
.dropdown{ position: relative; }

.dropdown-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 999999;

  display: none;                /* hidden by default */
  min-width: 220px;
  padding: 10px;
  margin: 0;

  list-style: none;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(18,31,56,.96);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

.dropdown-menu .dropdown-item{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}

.dropdown-menu .dropdown-item:hover{
  background: rgba(255,255,255,.06);
}

/* Bootstrap JS toggles .show */
.dropdown-menu.show{ display: block; }

/* Mobile: allow wrapping, and stack actions nicely */
@media (max-width: 900px){
  .nav{
    flex-wrap: wrap !important;
  }

  .nav-actions{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 10px;
  }
}

/* Ensure dropdown items never show as inline list bullets */
.dropdown-menu{
  list-style: none;
  padding-left: 0;
}

@media (max-width: 900px){
  .nav{
    flex-wrap: wrap;
    gap: 12px;
  }
  .nav-actions{
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
    margin-top: 10px;
  }
}