/* public/css/header.css
   App header styling that matches the home page look (sticky blur + pills + buttons)
   Works with your existing sh-* markup in partials/header.ejs
*/

/* Optional: Prevent subtle “center shift” between pages with/without a vertical scrollbar */
html{
  overflow-y: scroll;
}
@supports (scrollbar-gutter: stable){
  html{
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}

.sh-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(
    to bottom,
    rgba(15,23,42,0.92),
    rgba(15,23,42,0.78),
    transparent
  );
  border-bottom: 1px solid rgba(148,163,184,0.12);
}

.sh-nav{
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;

  /* ✅ FIX: keep Profile/Jobs/Dashboard/Messages anchored (no “floating middle” group) */
  justify-content: flex-start;
}

.sh-left,
.sh-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ✅ FIX: always push right side to the far right */
.sh-right{
  margin-left: auto;
}

.sh-link{
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background 0.16s ease, color 0.16s ease;
}

.sh-link:hover{
  background: rgba(15,23,42,0.92);
  color: var(--text-main);
}

.sh-link.brand{
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-main);
  padding: 6px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sh-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.26);
  background: rgba(148,163,184,0.06);
  color: var(--text-muted);
  font-size: 12px;
}

.sh-user{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background 0.16s ease;
}
.sh-user:hover{
  background: rgba(15,23,42,0.92);
}

.sh-avatar{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #f9fafb, #38bdf8 35%, #020617);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #06101a;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 0 18px rgba(56,189,248,0.45);
}

.sh-user-name{
  font-size: 13px;
  font-weight: 650;
  color: var(--text-main);
  line-height: 1.1;
}

/* Buttons in header */
.sh-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.38);
  background: rgba(15,23,42,0.55);
  color: var(--text-main);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.06s ease;
}
.sh-btn:hover{
  background: rgba(15,23,42,0.92);
  border-color: rgba(148,163,184,0.65);
  transform: translateY(-0.5px);
}

.sh-btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  color: #06101a;
  box-shadow: 0 10px 30px rgba(56,189,248,0.25);
}
.sh-btn-primary:hover{
  box-shadow: 0 14px 40px rgba(56,189,248,0.32);
}

/* Role switcher */
.sh-roleform{ margin: 0; }
.sh-role-select{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.26);
  background: rgba(2,6,23,0.55);
  color: var(--text-main);
  font-size: 13px;
  outline: none;
}
.sh-role-select:focus{
  border-color: rgba(56,189,248,0.55);
  box-shadow: var(--ring);
}

/* =========================================================
   Badges (global)
   Fix: true vertical centering everywhere (Dashboard + tables)
   ========================================================= */
.badge{
  /* Keep hidden by default */
  display: none;

  /* Make it a real centered pill when shown */
  align-items: center;
  justify-content: center;
  line-height: 1;

  /* Stable sizing */
  height: 22px;
  min-width: 22px;
  padding: 0 8px;

  margin-left: 6px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15px;

  background: rgba(56,189,248,0.16);
  color: rgba(56,189,248,0.95);
  border: 1px solid rgba(56,189,248,0.30);

  /* Safari baseline nudge (keeps badge from looking “low”) */
  transform: translateY(-1px);
}

.badge.show{ display: inline-flex; }

/* =========================================================
   Messages badge POP (only the Messages link badge)
   Uses .sh-msg-badge added in header.ejs
   ========================================================= */
.sh-link--messages{
  display: inline-flex;
  align-items: center;
  gap: 8px; /* keeps label + badge nicely spaced */
}

.sh-link--messages .sh-msg-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  vertical-align: middle;

  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;

  background: linear-gradient(135deg, rgba(56,189,248,0.98), rgba(14,165,233,0.96));
  color: #06101a;
  border: 1px solid rgba(255,255,255,0.28);

  box-shadow:
    0 0 0 4px rgba(56,189,248,0.18),
    0 10px 24px rgba(0,0,0,0.45);

  flex: 0 0 auto;

  /* This specific badge already “pops”; keep it aligned without extra nudge */
  transform: translateY(0);
}

.sh-link--messages .sh-msg-badge:not(.show){
  display: none;
}

.sh-link--messages:hover .sh-msg-badge{
  box-shadow:
    0 0 0 5px rgba(56,189,248,0.22),
    0 14px 34px rgba(0,0,0,0.55);
  transform: translateY(-0.5px);
}