/* ============================================================
   Uniqueue — header.css
   Shared site header + notification dropdown
   Design system: brand maroon / white · Inter only
   ============================================================ */

/* ── Site header ───────────────────────────────────────────── */
/* Fixed site header — does not scroll with page content.
   body padding-top reserves space so content is not hidden under it. */
html {
  overflow-x: clip;
}
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
  height: 64px !important;
  min-height: 64px !important;
  flex-shrink: 0 !important;
  background: var(--white) !important;
  border-bottom: 1px solid rgba(92,10,20,.12);
  box-shadow: none;
  display: flex !important;
  align-items: stretch;
  font-family: 'Inter', sans-serif;
  /* Full viewport edge-to-edge (avoids white gap from scrollbar-gutter) */
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
/* Space for fixed header (office pages use body flex column) */
body {
  padding-top: 64px !important;
  box-sizing: border-box;
}
/* Do not reserve permanent scrollbar gutter — causes right-edge gap on fixed bars */
html {
  scrollbar-gutter: auto !important;
}

.site-header__inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* ── Brand ─────────────────────────────────────────────────── */
.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  flex-shrink: 0;
  margin-left: 0;
}

.site-header__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Acts as the capital "U" in "Uniqueue" — sized and nudged to sit
   flush against the text baseline so logo + "niqueue" reads as one
   continuous wordmark instead of an icon-then-label pair. */
.site-header__logo--letterform {
  width: 38px;
  height: 38px;
  margin-right: -10px;
  position: relative;
  top: 1px;
}

/* Full Uniqueue wordmark (U icon + "niqueue" text baked into the image) */
.site-header__brand .site-header__logo.site-header__logo--wordmark {
  width: auto !important;
  height: 52px !important;
  max-height: 52px !important;
  max-width: 260px !important;
  min-width: 160px;
  object-fit: contain !important;
  display: block;
}

.site-header__name {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--brand-primary, #5c0a14);
  letter-spacing: .2px;
  line-height: 1;
}

/* ── Nav ───────────────────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.site-nav__link {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-mid);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}

.site-nav__link:hover {
  color: var(--ink);
  background: var(--mist);
}

.site-nav__link.active,
.site-nav__link[aria-current="page"] {
  color: var(--red);
  background: var(--red-soft);
  font-weight: 600;
}

/* ── User area ─────────────────────────────────────────────── */
.site-header__user {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  flex-shrink: 0;
}

.site-header__user-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-mid);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Ghost button (logout) ─────────────────────────────────── */
.btn--ghost {
  background: transparent;
  color: var(--ink-mid);
  border: 1.5px solid var(--smoke);
  font-weight: 500;
}

.btn--ghost:hover {
  background: var(--mist);
  color: var(--ink);
  border-color: var(--ink-faint);
}

/* ── Notification bell ─────────────────────────────────────── */
.notif-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xs);
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--ink-mid);
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  flex-shrink: 0;
}

.notif-bell:hover {
  color: var(--ink);
  background: var(--mist);
  border-color: var(--smoke);
}

.notif-bell[aria-expanded="true"] {
  color: var(--red);
  background: var(--red-soft);
  border-color: var(--red-border);
}

.notif-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--white);
  animation: badgePop 0.3s cubic-bezier(0.34,1.4,0.64,1) both;
}

.notif-badge[hidden] { display: none; }

@keyframes badgePop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── Notification dropdown ─────────────────────────────────── */
.notif-dropdown {
  position: absolute;
  top: calc(64px + 4px);
  right: max(calc(50% - 550px + 1.6rem), 1rem);
  width: 310px;
  background: var(--white);
  border: 1px solid rgba(92,10,20,.14);
  border-radius: 4px;
  box-shadow: none;
  z-index: 200;
  overflow: hidden;
  animation: dropIn 0.15s ease both;
  font-family: 'Inter', sans-serif;
}

.notif-dropdown[hidden] { display: none; }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.notif-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--smoke);
  background: var(--mist);
}

.notif-dropdown__header span {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.1px;
}

.notif-dropdown__close {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-light);
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  transition: color var(--transition), background var(--transition);
}

.notif-dropdown__close:hover {
  color: var(--ink);
  background: var(--smoke);
}

/* ── Notification list ─────────────────────────────────────── */
.notif-list {
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--smoke) transparent;
}

.notif-list__empty {
  padding: 2.2rem 1rem;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.notif-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--smoke);
  transition: background var(--transition);
  cursor: default;
}

.notif-list__item:last-child { border-bottom: none; }

.notif-list__item:hover { background: var(--red-soft); }

.notif-list__item--unread { background: #fffaf9; }

.notif-list__item--unread .notif-list__dot {
  display: block;
}

.notif-list__dot {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  margin-top: 5px;
}

.notif-list__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.notif-list__text {
  font-family: 'Inter', sans-serif;
  font-size: 0.855rem;
  color: var(--ink-mid);
  line-height: 1.45;
}

.notif-list__time {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.site-header--themed {
  background: var(--white, #ffffff) !important;
  width: 100% !important;
  margin: 0;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(92,10,20,.12);
  box-shadow: none;
}

.site-header--themed .site-header__inner {
  max-width: none;
  width: 100%;
  padding: 14px 24px 14px 4px;
  box-sizing: border-box;
}

.site-header--themed .site-header__name,
.site-header--themed .site-header__brand {
  color: var(--brand-primary, #660810);
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* ── Staff nav buttons (Dashboard / Transactions) ─────────────
   Sit left, right beside the brand — styled as pills to match
   the datetime/logout pill language used elsewhere in the
   themed header, instead of plain text nav links. */
.site-nav--staff {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: 22px;
}

.site-nav__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(92,10,20,.18);
  color: var(--brand-primary, #5c0a14);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .15px;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.site-nav__button:hover {
  background: rgba(92,10,20,.06);
  border-color: rgba(92,10,20,.28);
}

.site-nav__button:active {
  background: rgba(92,10,20,.1);
}

.site-nav__button.is-active,
.site-nav__button[aria-current="page"] {
  background: var(--brand-primary, #5c0a14);
  border-color: var(--brand-primary, #5c0a14);
  color: #ffffff;
}

@media (max-width: 640px) {
  .site-nav--staff {
    margin-left: 10px;
    gap: 6px;
  }
  .site-nav__button {
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
  }
}

/* Name + arrow dropdown trigger */
.profile-menu {
  position: relative;
}

.profile-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  color: var(--brand-primary, #5c0a14);
  transition: background .15s ease;
}

.profile-menu__trigger:hover {
  background: rgba(102,8,16,.06);
}

.profile-menu__chevron {
  flex-shrink: 0;
  transition: transform .2s ease;
}

.profile-menu__trigger[aria-expanded="true"] .profile-menu__chevron {
  transform: rotate(180deg);
}

.profile-menu__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid rgba(92,10,20,.14);
  border-radius: 4px;
  box-shadow: none;
  overflow: hidden;
  z-index: 300;
  font-family: 'Inter', sans-serif;
}

.profile-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-primary, #660810);
  text-decoration: none;
  transition: background .2s ease;
}

.profile-menu__item:hover {
  background: rgba(102,8,16,.06);
}

.profile-menu__item svg { flex-shrink: 0; opacity: .75; }

.site-header__datetime {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--brand-primary, #5c0a14);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  box-sizing: border-box;
}

.site-header__datetime-icon {
  display: none;
  flex: 0 0 auto;
  color: rgba(92,10,20,.45);
}

.site-header__time {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  color: var(--brand-primary, #5c0a14);
}

.site-header__date {
  font-size: 15px;
  font-weight: 500;
  color: rgba(92,10,20,.5);
  padding-left: 8px;
  border-left: 1px solid rgba(92,10,20,.14);
}

.site-header__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 80px;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(92,10,20,.18);
  color: var(--brand-primary, #5c0a14);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .15px;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.site-header__logout:hover {
  background: var(--brand-primary, #5c0a14);
  border-color: var(--brand-primary, #5c0a14);
  color: #fff;
}

.site-header__logout:active {
  transform: translateY(1px);
}

.site-header__logout:focus-visible {
  outline: 2px solid var(--brand-primary, #5c0a14);
  outline-offset: 2px;
}

.site-header__logout svg {
  flex: 0 0 auto;
}

.site-header--themed .notif-bell {
  color: rgba(102,8,16,.6);
}

.site-header--themed .notif-bell:hover {
  background: rgba(102,8,16,.08);
  color: var(--brand-primary, #660810);
}

.site-header--themed .site-header__user-name {
  color: var(--brand-primary, #660810);
  font-weight: 600;
}

@media (max-width: 900px) {
  .site-header__date { display: none; }
  .site-header__logout span { display: none; }
  .site-header__datetime,
  .site-header__logout {
    min-width: 0;
  }
  .site-header__logout { padding: 0 12px; }
  .profile-menu__trigger .site-header__user-name { display: none; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .site-header__inner { padding: 0 1rem; gap: 0.65rem; }
  .site-nav__link { font-size: 0.82rem; padding: 0.38rem 0.65rem; }
  .site-header__user-name { display: none; }
  .notif-dropdown.notif-dropdown { right: 1rem; left: 1rem; width: auto; }

  /* Themed header (staff/office/admin pages) previously kept its
     desktop 14px/24px padding at every width, and .site-header__right's
     12px gap never shrank — together these were the main cause of
     crowding/overflow on tablets and phones, since this header packs
     brand + staff nav pills + datetime pill + logout pill + notif
     bell + profile menu into a single non-wrapping row. On the student
     header specifically, the nav pills (Dashboard/Transactions) AND
     the name+chevron dropdown are both present at once — a heavier
     combo than staff/admin get — so this breakpoint was raised from
     700px to 900px: on split-screen / narrower-desktop widths (roughly
     750–900px) the old 700px trigger was too late and the row
     overflowed/clipped before anything had a chance to shrink. */
  .site-header--themed .site-header__inner {
    padding: 10px 1rem;
    gap: 0.6rem;
  }
  .site-header__right {
    gap: 8px;
  }
}

@media (max-width: 560px) {
  /* Datetime pill: drop the icon and tighten padding — the time
     itself is the only info that still needs to stay visible here
     (date already hidden at 900px above). */
  .site-header__datetime {
    padding: 0 10px;
    gap: 4px;
  }
  .site-header__datetime-icon {
    display: none;
  }
  .site-header__time {
    font-size: 12.5px;
  }

  .site-header__logout {
    height: 34px;
    padding: 0 10px;
  }

  .notif-bell {
    width: 32px;
    height: 32px;
  }

  .profile-menu__trigger {
    padding: 6px;
  }
}

@media (max-width: 440px) {
  /* Only show active nav link on very small screens */
  .site-nav__link:not(.active):not([aria-current="page"]) { display: none; }

  /* Mirror the same treatment for the themed staff nav pills —
     previously every .site-nav__button stayed visible and, combined
     with the datetime + logout pills, this row of buttons had
     nowhere left to shrink and would start clipping/overflowing. */
  .site-nav__button:not(.is-active):not([aria-current="page"]) {
    display: none;
  }
  .site-nav--staff {
    margin-left: 6px;
  }

  .site-header__brand {
    gap: 0;
    margin-left: 0;
  }
  .site-header__name {
    font-size: 1.05rem;
  }
  .site-header__logo {
    width: 28px;
    height: 28px;
  }
  .site-header__logo--letterform {
    width: 30px;
    height: 30px;
    margin-right: -8px;
  }
  .site-header__brand .site-header__logo.site-header__logo--wordmark {
    height: 36px !important;
    max-height: 36px !important;
    max-width: 180px !important;
    min-width: 110px;
  }
}

@media (max-width: 380px) {
  .site-header--themed .site-header__inner {
    padding: 8px 0.7rem;
    gap: 0.4rem;
  }
  .site-header__right {
    gap: 5px;
  }
  .site-header__datetime {
    display: none; /* time isn't essential enough to justify the space at this width */
  }
  .site-header__logout span {
    display: none; /* already hidden at 640px, kept here for safety */
  }
  .site-header__logout {
    min-width: 34px;
    padding: 0 8px;
  }
}

.profile-menu__item--mobile-nav {
  display: none;
}

@media (max-width: 900px) {
  /* .site-nav.site-nav--student (two classes) instead of just
     .site-nav--student — office-dashboard.css defines an unconditional
     `.site-nav { display: flex; }` with the same specificity as a
     single-class selector, and since it loads AFTER header.css in
     header.php, it was winning the tie and keeping the pills visible
     even when this media query matched. Combining both classes here
     raises specificity above that rule so the hide always wins,
     regardless of stylesheet load order. */
  .site-nav.site-nav--student {
    display: none;
  }

  .profile-menu__item--mobile-nav {
    display: flex;
  }

  .profile-menu__item--mobile-nav.is-active {
    background: rgba(102,8,16,.08);
  }

  /* Small visual separator between the nav items and My Profile,
     so the dropdown still reads as two groups. */
  .profile-menu__item--mobile-nav:nth-of-type(2) {
    border-bottom: 1px solid rgba(20,20,20,.08);
  }
}
/* Repeatable client walkthrough: an accessible help action in the header. */
.client-tour-help{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;box-sizing:border-box;width:34px;height:34px;padding:0;border:1px solid #d6c6c9;border-radius:8px;background:#fff;color:#660810;font:700 18px/1 Inter,Arial,sans-serif;cursor:pointer}
.client-tour-help:hover{background:#f8eded;border-color:#a9858a}.client-tour-help:focus-visible{outline:3px solid #af626f;outline-offset:3px}