/* header.css — ONLY header styles, fully scoped */

/* Root scope for the header ONLY (no global variables) */
.app-header{
  --hdr-bg:#ffffff;
  --hdr-ink:#0b1220;
  --hdr-muted:#64748b;
  --hdr-line:#e5e7eb;
  --hdr-accent:#111827;          /* accent used for hover/focus, NOT --brand */
  --hdr-contrast:#ffffff;

  position:relative;
  z-index:100;
  background:var(--hdr-bg);
  color:var(--hdr-ink);
  border-bottom:1px solid var(--hdr-line);
  -webkit-font-smoothing:antialiased;
}

/* Layout */
.app-header .container{
  max-width:1280px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:16px;
}

/* Brand */
.app-header .brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--hdr-ink);
  font-weight:900;
  letter-spacing:.2px;
}
.app-header .brand img{
  width:36px; height:36px; object-fit:contain; display:block;
}

/* Primary nav */
.app-header .nav{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:12px;
}
.app-header .nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--hdr-ink);
  font-weight:800;
  font-size:15px;
  line-height:1;
  padding:8px 6px;
  border-radius:10px;
}
.app-header .nav a:hover,
.app-header .nav a:focus-visible{
  background:#f8fafc;
  outline:none;
}

/* Current page indicator */
.app-header .nav .is-active{
  position:relative;
}
.app-header .nav .is-active::after{
  content:"";
  position:absolute;
  left:6px; right:6px; bottom:-8px;
  height:2px; border-radius:2px;
  background:var(--hdr-ink);
}

/* Right-side actions (login, CTA, etc.) */
.app-header .actions{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
}
.app-header .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 14px; border-radius:10px;
  font-weight:900; font-size:14px; cursor:pointer;
  border:1px solid var(--hdr-line); background:#fff; color:var(--hdr-ink);
  transition:transform .06s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.app-header .btn:active{ transform:translateY(1px); }
.app-header .btn:hover{ background:#f8fafc; }

/* Subtle, neutral primary (not blue) */
.app-header .btn-primary{
  border:1px solid #11182722;
  background:#111827;           /* neutral charcoal */
  color:#fff;
  box-shadow:0 8px 22px rgba(17,24,39,.18), inset 0 -1px 0 rgba(255,255,255,.18);
}
.app-header .btn-primary:hover{ filter:saturate(105%); }

/* Link-style action */
.app-header .btn-link{
  border:none; background:transparent; color:var(--hdr-ink); padding:0 6px; height:auto;
}
.app-header .btn-link:hover{ opacity:.85; }

/* Search (if you have it) */
.app-header .search{
  position:relative; display:flex; align-items:center;
}
.app-header .search input{
  height:40px; border-radius:10px; border:1px solid var(--hdr-line);
  padding:0 12px 0 36px; background:#fff; color:var(--hdr-ink);
  font-weight:800; font-size:14px; outline:none;
}
.app-header .search input:focus{
  border-color:#cbd5e1;
  box-shadow:0 0 0 3px rgba(148,163,184,.25);
}
.app-header .search svg{
  position:absolute; left:10px; width:18px; height:18px; stroke:#94a3b8;
}

/* Mobile */
.app-header .menu-toggle{
  display:none; margin-left:auto; border:1px solid var(--hdr-line);
  background:#fff; height:40px; width:40px; border-radius:10px; cursor:pointer;
}
.app-header .menu-toggle svg{ width:20px; height:20px; stroke:var(--hdr-ink); }

@media (max-width: 860px){
  .app-header .nav{ display:none; }
  .app-header .menu-toggle{ display:inline-grid; place-items:center; }
}

/* Optional sticky variant */
.app-header.is-sticky{
  position:sticky; top:0;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(255,255,255,.85);
}

/* Optional dark variant (if some pages need it) */
.app-header--dark{
  --hdr-bg:#0b1220;
  --hdr-ink:#e5e7eb;
  --hdr-muted:#94a3b8;
  --hdr-line:#111827;
}
.app-header--dark{
  border-bottom-color:#0f172a;
}
.app-header--dark .btn{ background:#0b1220; border-color:#1f2937; color:#e5e7eb; }
.app-header--dark .btn:hover{ background:#111827; }
.app-header--dark .btn-primary{ background:#111827; border-color:#111827; }
.app-header--dark .menu-toggle{ background:#0b1220; border-color:#1f2937; }
.app-header--dark .search input{ background:#0b1220; border-color:#1f2937; color:#e5e7eb; }

/* ===== Header access pill (simple, header-only) ===== */
.header-spot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 28px;
  padding: 0 0.6rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: rgba(148, 163, 184, 0.12);
  backdrop-filter: saturate(140%) blur(2px);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .15px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.header-spot .hdr-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  background: #22c55e; /* green default */
}
.header-spot.is-yellow .hdr-dot { background: #f59e0b; }
.header-spot.is-red    .hdr-dot { background: #ef4444; }

.header-spot .hdr-label { opacity: .85; font-weight: 600; }
.header-spot .hdr-count { font-weight: 900; }
.header-spot .hdr-sfx   { opacity: .85; }

/* Optional: hide the pill on smaller screens to save space */
@media (max-width: 992px){
  .header-spot { display: none; }
}

/* ===== Header: global access codes pill (safe to load on all pages) ===== */
.app-header .header-spot{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:9999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(148,163,184,.10);
  backdrop-filter:saturate(140%) blur(2px);
  text-decoration:none; color:inherit;
  height:30px;
  font-weight:800; font-size:12px; letter-spacing:.15px;
  white-space:nowrap;
}

/* small status dot + bands */
.app-header .header-spot .hdr-dot{
  width:8px; height:8px; border-radius:9999px;
  background:#22c55e; /* default green */
}
.app-header .header-spot.is-green .hdr-dot { background:#22c55e; }
.app-header .header-spot.is-yellow .hdr-dot{ background:#f59e0b; }
.app-header .header-spot.is-red .hdr-dot   { background:#ef4444; }

/* label + number */
.app-header .header-spot .hdr-label{ opacity:.85; font-weight:700; }
.app-header .header-spot .hdr-count{ font-weight:900; margin-left:2px; }
.app-header .header-spot .hdr-sfx  { opacity:.85; margin-left:4px; }

/* hover */
.app-header .header-spot:hover{
  border-color: rgba(15,23,42,.16);
  background:rgba(148,163,184,.14);
}

/* keep header tidy on small viewports */
@media (max-width: 860px){
  .app-header .header-spot{ display:none; }
}

/* Mobile-only compact pill (between hamburger and logo) */
.header-spot-mobile {
  display: none;
}

@media (max-width: 992px) {
  .header-spot-mobile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(148,163,184,.12);
    backdrop-filter: saturate(140%) blur(2px);
    font-weight: 800;
    font-size: 11px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }
  
  .header-spot-mobile .hdr-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
    background: #22c55e;
    flex-shrink: 0;
  }
  
  .header-spot-mobile.is-yellow .hdr-dot { background: #f59e0b; }
  .header-spot-mobile.is-red .hdr-dot { background: #ef4444; }
  
  .header-spot-mobile .hdr-label { 
    opacity: 0.85; 
    font-weight: 700;
    font-size: 11px;
  }
  .header-spot-mobile .hdr-count { font-weight: 900; }
}