/* ═══════════════════════════════════════
   UNIVERSITY NOTES — NAVBAR
   Single source of truth, no duplicates
═══════════════════════════════════════ */

#unique-navbar * { box-sizing: border-box; margin: 0; padding: 0; }
#unique-navbar a { text-decoration: none !important; }

/* ── Base nav ── */
#unique-navbar nav {
  background: #0b6ef6;
  position: sticky;
  top: 0;
  z-index: 2147483647;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  overflow: visible;
}

#unique-navbar .navbar {
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 58px;
  gap: 10px;
  position: relative;
  overflow: visible;
}

/* ── Logo ── */
#unique-navbar .logo { flex-shrink: 0; }
#unique-navbar .logo a { display: inline-flex; align-items: center; text-decoration: none; }
#unique-navbar .logo img { height: 42px; width: auto; object-fit: contain; display: block; border-radius: 6px; }

/* ── Nav list (mobile-first: vertical drawer) ── */
#unique-navbar #nav {
  list-style: none;
  position: absolute;
  top: 58px; left: 0;
  width: 100%;
  background: #0b6ef6;
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, box-shadow 0.2s;
  z-index: 2147483647;
}

#unique-navbar #nav.active {
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  -webkit-overflow-scrolling: touch;
}

/* L0 items */
#unique-navbar #nav > li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.08); }
#unique-navbar #nav > li:last-child { border-bottom: none; }

#unique-navbar #nav > li > a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 11px 16px;
  color: white !important;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
}
#unique-navbar #nav > li > a:hover,
#unique-navbar #nav > li > a:active { background: rgba(255,255,255,0.1); color: yellow !important; }

#unique-navbar .dropdown-toggle { cursor: pointer; user-select: none; }

/* ── Hamburger ──
   Visual icon stays 24px, but the tappable area is padded out to the
   ~44px minimum recommended touch-target size, so it's not a fiddly
   tap on real phones. */
#unique-navbar .hamburger {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 12px 10px;
  margin: -6px -4px;
  border-radius: 8px;
  transition: background 0.2s;
  -webkit-tap-highlight-color: rgba(255,255,255,0.15);
}
#unique-navbar .hamburger:hover { background: rgba(255,255,255,0.12); }
#unique-navbar .hamburger div {
  width: 24px; height: 2.5px;
  background: white;
  border-radius: 2px;
  transition: all 0.25s ease;
  transform-origin: center;
}
#unique-navbar .hamburger.open div:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
#unique-navbar .hamburger.open div:nth-child(2) { opacity: 0; transform: scaleX(0); }
#unique-navbar .hamburger.open div:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── Keyboard focus ──
   No navbar-specific focus style existed before, so keyboard users
   fell back on whatever the browser default was (often invisible on
   a blue background). A visible, on-brand focus ring for every
   interactive nav element. */
#unique-navbar a:focus-visible,
#unique-navbar .hamburger:focus-visible {
  outline: 2px solid #ffcc00;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Respect "reduce motion" OS setting ──
   People who've told their OS they get motion-sick or distracted by
   animation still had the full slide/fade treatment forced on them. */
@media (prefers-reduced-motion: reduce) {
  #unique-navbar *,
  #navBackdrop {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ── Mobile drawer backdrop ──
   Dims the page behind the slide-out menu so it visually reads as a
   modal panel, and gives a big, obvious tap target to dismiss it.
   Built at runtime by menu.js; lives outside #unique-navbar so it
   never fights that container's own stacking/overflow rules. */
#navBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 2147483646; /* one below the navbar/drawer itself */
}
#navBackdrop.active {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 769px) {
  #navBackdrop { display: none; }
}

/* ── Current-page highlight — desktop + mobile share the base rule;
   each layout's media query below only adjusts the visual treatment. ── */
#unique-navbar #nav > li > a.nav-current,
#unique-navbar .dropdown > li > a.nav-current,
#unique-navbar .flyout li a.nav-current {
  color: #ffcc00 !important;
  font-weight: 700;
}
/* Submenu toggles (Courses ▾, BCA ›, etc.) get a subtle marker when
   the currently-open page lives inside them, so people can tell which
   section they're in even before expanding it. */
#unique-navbar .nav-current-parent {
  color: #ffe066 !important;
}

/* ══════════════════════════════════════════
   MOBILE  (≤ 768px)
══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Drawer: anchored to the right, narrow slide-out panel,
     with a small breathing gap below the navbar */
  #unique-navbar #nav {
    left: auto;
    right: 0;
    top: 66px;
    width: 62%;
    max-width: 270px;
    min-width: 220px;
    border-radius: 12px 0 0 12px;
    transition: max-height 0.35s ease, box-shadow 0.25s ease;
  }

  #unique-navbar #nav.active {
    box-shadow: -10px 8px 26px rgba(0,0,0,0.3);
  }

  /* Tighter, tap-friendly rows for the narrower panel */
  #unique-navbar #nav > li > a {
    padding: 10px 14px;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  /* Mobile current-page: left accent bar + tinted row, easy to spot
     while scanning the drawer. */
  #unique-navbar #nav > li > a.nav-current {
    background: rgba(255,204,0,0.14);
    box-shadow: inset 3px 0 0 #ffcc00;
  }
  #unique-navbar .dropdown > li > a.nav-current,
  #unique-navbar .flyout li a.nav-current {
    background: rgba(255,204,0,0.12);
    box-shadow: inset 3px 0 0 #ffcc00;
  }

  /* L1 dropdown */
  #unique-navbar .dropdown {
    max-height: 0;
    overflow: hidden;
    list-style: none;
    background: rgba(0,0,0,0.15);
    width: 100%;
    position: static;
    transition: max-height 0.35s ease;
  }
  #unique-navbar .dropdown.active {
    max-height: 1000px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  #unique-navbar .dropdown > li { border-bottom: 1px solid rgba(255,255,255,0.06); }
  #unique-navbar .dropdown > li:last-child { border-bottom: none; }
  #unique-navbar .dropdown > li > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 16px 10px 22px;
    color: rgba(255,255,255,0.9) !important;
    font-size: 0.93rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
  }
  #unique-navbar .dropdown > li > a:hover { background: rgba(255,255,255,0.08); color: yellow !important; }

  /* has-flyout toggles (BCA / MCA / M.Sc. etc.) need the arrow pushed
     to the far right, so they keep space-between; plain links above
     (All UG Courses, Merit List, etc.) use flex-start so the icon and
     text sit close together instead of stretching across the row. */
  #unique-navbar .has-flyout > a {
    justify-content: space-between;
  }

  /* L2 flyout arrow */
  #unique-navbar .has-flyout > a .arr { font-size: 1.1rem; opacity: 0.6; transition: transform 0.2s; }
  #unique-navbar .has-flyout.open > a .arr { transform: rotate(90deg); opacity: 1; }
  #unique-navbar .has-flyout > a { transition: background 0.15s; }
  #unique-navbar .has-flyout.open > a { background: rgba(0,0,0,0.15); }

  /* L2 flyout — smooth accordion, only one open at a time (handled in JS) */
  #unique-navbar .flyout {
    max-height: 0;
    overflow: hidden;
    list-style: none;
    background: rgba(0,0,0,0.12);
    transition: max-height 0.3s ease;
  }
  #unique-navbar .flyout.open {
    max-height: 500px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  #unique-navbar .flyout li { border-bottom: 1px solid rgba(255,255,255,0.05); }
  #unique-navbar .flyout li:last-child { border-bottom: none; }
  #unique-navbar .flyout li a {
    display: block;
    padding: 8px 16px 8px 36px;
    color: rgba(255,255,255,0.78) !important;
    font-size: 0.87rem;
    text-decoration: none;
    transition: background 0.12s;
  }
  #unique-navbar .flyout li a::before { content: "– "; opacity: 0.5; }
  #unique-navbar .flyout li a:hover { background: rgba(255,255,255,0.08); color: yellow !important; }

  /* Divider */
  #unique-navbar .dd-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 4px 0; }

  /* ── Compact mode: kicks in whenever a dropdown/flyout is open,
       so the whole menu tree fits the viewport with zero internal
       scrolling — rows shrink instead of the drawer scrolling. ── */
  #unique-navbar #nav.compact {
    max-height: calc(100vh - 66px);
  }
  #unique-navbar #nav.compact > li > a {
    padding: 7px 14px;
    font-size: 0.85rem;
  }
  #unique-navbar #nav.compact .dropdown > li > a {
    padding: 7px 16px 7px 22px;
    font-size: 0.85rem;
  }
  #unique-navbar #nav.compact .flyout li a {
    padding: 6px 16px 6px 34px;
    font-size: 0.8rem;
  }

}

/* ══════════════════════════════════════════
   DESKTOP  (≥ 769px)
══════════════════════════════════════════ */
@media (min-width: 769px) {

  #unique-navbar .hamburger { display: none !important; }

  /* Horizontal nav */
  #unique-navbar #nav {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 0px;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    padding: 0;
    margin-right: 4px;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
    z-index: auto;
  }

  #unique-navbar #nav > li {
    border: none !important;
    width: auto !important;
    position: relative;
  }

  #unique-navbar #nav > li > a {
    padding: 7px 5px !important;
    font-size: 0.88rem !important;
    border-radius: 6px;
    white-space: nowrap;
    color: white !important;
    transition: background 0.15s, color 0.15s !important;
    position: relative;
  }
  #unique-navbar #nav > li > a:hover { background: rgba(255,255,255,0.15) !important; color: yellow !important; }

  /* Desktop current-page: small underline bar under the label so it
     reads at a glance without shouting over the rest of the bar. */
  #unique-navbar #nav > li > a.nav-current::after {
    content: '';
    position: absolute;
    left: 5px; right: 5px;
    bottom: -2px;
    height: 2.5px;
    border-radius: 2px;
    background: #ffcc00;
  }

  /* ── L1 Dropdown — blue card ── */
  #unique-navbar .dropdown {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #0b6ef6 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 36px rgba(0,0,0,0.22) !important;
    padding: 6px 0 !important;
    z-index: 9100 !important;
    list-style: none;
    min-width: 175px;
    width: max-content;
    max-width: 280px;
    border: 1px solid rgba(255,255,255,0.15) !important;
  }

  #unique-navbar .dropdown-parent:hover > .dropdown,
  #unique-navbar .dropdown-parent .dropdown.active { display: block !important; }

  #unique-navbar .dropdown > li {
    border: none !important;
    width: 100% !important;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  #unique-navbar .dropdown > li:last-child { border-bottom: none !important; }

  #unique-navbar .dropdown > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px !important;
    font-size: 0.875rem !important;
    color: rgba(255,255,255,0.9) !important;
    text-decoration: none;
    transition: background 0.12s;
    white-space: nowrap;
    gap: 12px;
    font-weight: 400;
  }
  #unique-navbar .dropdown > li > a::before { content: "" !important; }
  #unique-navbar .dropdown > li > a:hover { background: rgba(255,255,255,0.12) !important; color: yellow !important; }

  /* has-flyout arrow */
  #unique-navbar .has-flyout > a .arr { color: rgba(255,255,255,0.5); font-size: 1rem; }
  #unique-navbar .has-flyout:hover > a { background: rgba(255,255,255,0.12) !important; color: yellow !important; }
  #unique-navbar .has-flyout:hover > a .arr { color: yellow; }

  /* ── L2 Flyout — blue panel, right side ── */
  #unique-navbar .flyout {
    display: none !important;
    position: absolute !important;
    top: -6px !important;
    left: 100% !important;
    background: #0b6ef6 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 36px rgba(0,0,0,0.22) !important;
    padding: 6px 0 !important;
    z-index: 9200 !important;
    list-style: none;
    min-width: 195px;
    border: 1px solid rgba(255,255,255,0.15) !important;
  }

  #unique-navbar .has-flyout:hover > .flyout { display: block !important; }

  #unique-navbar .flyout li {
    border: none !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  #unique-navbar .flyout li:last-child { border-bottom: none !important; }

  #unique-navbar .flyout li a {
    display: block;
    padding: 10px 16px !important;
    font-size: 0.875rem !important;
    color: rgba(255,255,255,0.9) !important;
    text-decoration: none;
    transition: background 0.12s;
    white-space: nowrap;
    font-weight: 400;
  }
  #unique-navbar .flyout li a::before { content: "" !important; }
  #unique-navbar .flyout li a:hover { background: rgba(255,255,255,0.12) !important; color: yellow !important; }

  /* Divider */
  #unique-navbar .dd-divider { height: 1px !important; background: rgba(255,255,255,0.12) !important; margin: 4px 0 !important; padding: 0 !important; border: none !important; }

  /* ── Profile dropdown — hover open ── */
  #unique-navbar #profileMenu { position: relative; }

  #unique-navbar #profileDropdown {
    display: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    opacity: 0;
    transform: translateY(10px);
  }

  #unique-navbar #profileMenu:hover > #profileDropdown,
  #unique-navbar #profileMenu #profileDropdown:hover,
  #unique-navbar #profileMenu.active #profileDropdown {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* invisible bridge to prevent hover gap */
  #unique-navbar #profileMenu::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -8px;
    height: 10px;
    background: transparent;
    z-index: 9299;
  }
}

/* ── Profile menu (shared) ── */
#unique-navbar #profileMenu {
  display: inline-flex !important;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  z-index: 9300;
}
#unique-navbar .profile-menu { display: inline-flex !important; align-items: center; gap: 6px; }

#unique-navbar .profile-trigger {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: white; transition: background 0.2s; text-decoration: none;
}
#unique-navbar .profile-trigger:hover { background: rgba(255,255,255,0.22); transform: translateY(-1px); }
#unique-navbar .profile-trigger i { font-size: 22px; color: #ffcc00; }
#unique-navbar .profile-trigger .username-text {
  color: white; font-weight: 600; font-size: 0.9rem;
  white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
#unique-navbar .user-greeting {
  color: #ffcc00; font-weight: 600; font-size: 0.9rem;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
#unique-navbar .user-greeting i { font-size: 1.1em; }

#unique-navbar .login-btn {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  border: none;
  color: #fff; padding: 7px 16px; border-radius: 8px;
  font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 16px -4px rgba(79,70,229,0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#unique-navbar .login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -4px rgba(79,70,229,0.6);
}
#unique-navbar .login-btn:active { transform: translateY(0); }

/* ── PWA Install (nav item, sits after Contact) ──
   Visible by default like every other nav item (Home, Contact, etc.) —
   no more waiting on the browser's beforeinstallprompt event, which can
   fire late or never (e.g. iOS Safari, or once the app is already
   installed). Only hidden explicitly via .hide, when we know for sure
   the app is already installed. */
#unique-navbar .install-item { display: list-item; }
#unique-navbar .install-item.hide { display: none; }
#unique-navbar .install-item > a { color: #ffcc00 !important; font-weight: 700; }
#unique-navbar .install-item > a:hover { color: #fff !important; }

#unique-navbar .logout-btn {
  background: rgba(255,107,107,0.15); color: #ff6b6b;
  border: 1px solid rgba(255,107,107,0.35);
  padding: 6px 12px; border-radius: 6px;
  font-size: 0.85rem; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; cursor: pointer; transition: background 0.2s;
  min-width: 80px; justify-content: center;
}
#unique-navbar .logout-btn:hover { background: rgba(255,107,107,0.28); color: #ff5252; }

#unique-navbar #profileDropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: white; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  width: 280px; max-width: calc(100vw - 24px);
  z-index: 9400; overflow: hidden;
  max-height: 80vh; overflow-y: auto;
}

/* ── Profile dropdown content blocks (built by script.js) ──
   Base/desktop spacing here; mobile media query below tightens it. */
#unique-navbar .pd-block { padding: 7px 12px; }
#unique-navbar .pd-row { margin-bottom: 5px; }
#unique-navbar .pd-row-sm { margin-bottom: 4px; }

/* ── Profile dropdown — mobile ──
   position/top/left/width are set live by repositionDropdown() in
   script.js (it needs the button's real position), so only the
   things JS doesn't touch live here: shape, shadow, cap height, spacing. */
@media (max-width: 768px) {
  #unique-navbar #profileDropdown {
    max-height: calc(100vh - 150px);
    border-radius: 14px;
    box-shadow: -10px 8px 26px rgba(0,0,0,0.3);
    overflow-y: auto;
  }

  /* Tighter spacing so the card doesn't run so tall on small screens */
  #unique-navbar .pd-block { padding: 5px 10px; }
  #unique-navbar .pd-row { margin-bottom: 3px; }
  #unique-navbar .pd-row-sm { margin-bottom: 3px; }
}


/* ── Skeleton ── */
#unique-navbar .skeleton-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#unique-navbar .skeleton-box {
  background: linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 50%,#e5e7eb 75%);
  background-size: 200% 100%;
  animation: navSkel 1.5s infinite;
  border-radius: 6px;
}
@keyframes navSkel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
#unique-navbar .profile-dropdown-skeleton { padding: 20px 15px; }
#unique-navbar .profile-dropdown-skeleton .skeleton-title { width: 140px; height: 16px; border-radius: 6px; margin-bottom: 20px; }
#unique-navbar .profile-dropdown-skeleton .skeleton-btn { width: 100%; height: 38px; border-radius: 8px; margin-top: 8px; }

/* ── Very small phones (≤ 360px) ── */
@media (max-width: 360px) {
  #unique-navbar .navbar { padding: 0 10px; height: 54px; }
  #unique-navbar .logo img { height: 36px; }
  #unique-navbar #nav { top: 62px; }
  #unique-navbar .login-btn span { display: none; }
  #unique-navbar .login-btn { padding: 6px 8px; }
}

.not-logged-in #profileMenu .login-btn { display: flex; }