/* ════════════════════════════════════════════════════════════════
   DTTASA — COMMAND BAR HEADER (Header 3, VP-selected 2026-06-14)
   ONE header language for the WHOLE portal. CSS-only, no JS change.

   The portal has NO unified header markup — pages invented their own
   class names over time. This stylesheet maps EVERY header vocabulary
   onto the same Command Bar look, under two scopes:

     • #hdr      — the 20 standard staff pages (header id="hdr")
     • .cmd-bar  — the 9 bespoke board headers, which each opt in with a
                   `cmd-bar` marker class added to their header element
                   (#hr-header, #it-header, #archive-header, #ops-header,
                    #exec-header, #cm-header, #lv-hdr, .eom-header, #vmem-hdr)

   Signature: dark command gradient, animated gold scan-line (#hdr pages),
   prominent mono-gold clock, gold-outlined command pills, segmented gold
   action icons, premium photo-filled user chip with a gold ring.
   Loaded AFTER each page's own CSS so it wins. !important throughout so it
   beats the pages' pre-existing header rules.
   ════════════════════════════════════════════════════════════════ */

/* ── The bar: PREMIUM command gradient — three layered backgrounds ───
   1) a travelling gold scan-line pinned to the bottom edge,
   2) an ambient gold aura bleeding from the top,
   3) the dark command base. Plus a pulsing gold box-shadow halo.
   Done with layered backgrounds (NOT a ::after pseudo) so it applies
   uniformly on the board headers too, none of which can be clobbered —
   every board's own ::after / ::before is left intact. This IS the
   portal's "Premium pass" motion language (gold scan-line + ambient
   glow + glow-lift), now carried by the header on every page. */
#hdr, .cmd-bar{
  background-color:#0e1a0c !important;
  background-image:
    linear-gradient(90deg,transparent,rgba(240,200,50,.92),transparent),
    radial-gradient(130% 200% at 50% -60%, rgba(240,200,50,.12), transparent 62%),
    linear-gradient(180deg,#0e1a0c,rgba(10,19,8,.94)) !important;
  background-repeat:no-repeat, no-repeat, no-repeat !important;
  background-size:200% 1.6px, 100% 100%, 100% 100% !important;
  background-position:200% 100%, 0 0, 0 0 !important;
  border-bottom:1px solid var(--gglow,rgba(240,200,50,.22)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  /* ── STATIC (non-scrolling) HEADER, portal-wide (VP 2026-07-26) ──────
     This was `position:relative`, and because this file loads AFTER each
     page's own CSS it beat every page's `position:fixed`, so the header
     scrolled away on ALL 30 pages that link it. Measured, not inferred:
     computed position was `relative` and the header left the viewport.

     `sticky` rather than `fixed` on purpose. Only 2 of the 10 pages that
     declare a fixed header actually reserve top padding for it, so
     restoring `fixed` portal-wide would hide the first block of content on
     the other 8. Sticky keeps the header IN FLOW, so it needs no
     reservation anywhere and cannot overlap content, and it is also what
     the Claude Design prototype specified. */
  position:sticky !important;
  top:0 !important;
  z-index:200 !important;
  animation:hdrCmdScan 5s cubic-bezier(.16,1,.3,1) infinite, hdrCmdGlow 6s ease-in-out infinite !important;
}
/* Travelling gold scan-line (moves the 1st background layer along the bottom) */
@keyframes hdrCmdScan{
  0%  {background-position:200% 100%, 0 0, 0 0;}
  100%{background-position:-200% 100%, 0 0, 0 0;}
}
/* Ambient gold halo — soft pulsing aura under the bar */
@keyframes hdrCmdGlow{
  0%,100%{box-shadow:0 2px 22px -14px rgba(240,200,50,.32);}
  50%    {box-shadow:0 5px 36px -12px rgba(240,200,50,.58);}
}

/* ── Prominent mono-gold clock (command-bar centrepiece) ──────────── */
#hdr .hdr-clock, #hdr #hdr-clock,
.cmd-bar .hdr-clock, .cmd-bar #hdr-clock, .cmd-bar .hdr-wclock{
  font-family:var(--mono,'IBM Plex Mono',monospace) !important;
  font-size:17px !important; font-weight:600 !important; letter-spacing:1px !important;
  color:var(--gold,#f0c832) !important; line-height:1.05; text-shadow:0 0 14px rgba(240,200,50,.28);
  background:rgba(0,0,0,.22) !important; border:1px solid var(--gglow,rgba(240,200,50,.22)) !important;
  border-radius:9px !important; padding:6px 11px !important;
}
.cmd-bar .hdr-wclock-time{ color:var(--gold,#f0c832) !important; font-family:var(--mono,'IBM Plex Mono',monospace) !important; font-weight:600 !important; }
#hdr .hdr-clock-tz, #hdr .hdr-date, #hdr #hdr-date,
.cmd-bar .hdr-clock-tz, .cmd-bar .hdr-date, .cmd-bar .hdr-wclock-temp{
  font-family:var(--mono,'IBM Plex Mono',monospace) !important;
  font-size:9px !important; letter-spacing:2px !important; text-transform:uppercase;
  color:var(--t3,rgba(242,247,238,.6)) !important;
}

/* ── Command pills — every page-label variant → gold command outline ─ */
#hdr .page-pill, #hdr .hdr-page, #hdr .hdr-title-pill, #hdr .hdr-page-title,
#hdr .hdr-page-pill, #hdr .hdr-week-pill, #hdr .hdr-admin-chip,
.cmd-bar .page-pill, .cmd-bar .hdr-page, .cmd-bar .hdr-title-pill, .cmd-bar .hdr-page-title,
.cmd-bar .hdr-page-pill, .cmd-bar .hdr-week-pill, .cmd-bar .page-title-pill, .cmd-bar .hdr-admin-chip{
  background:rgba(240,200,50,.07) !important;
  border:1px solid var(--gglow,rgba(240,200,50,.34)) !important;
  color:var(--gold,#f0c832) !important;
  letter-spacing:.9px !important; text-transform:uppercase !important;
  font-size:11px !important; font-weight:700 !important;
  border-radius:8px !important; padding:6px 12px !important;
  font-family:var(--mono,'IBM Plex Mono',monospace) !important;
  /* premium ambient glow + soft pulse */
  box-shadow:0 0 18px -6px rgba(240,200,50,.4), 0 0 0 1px rgba(240,200,50,.06) inset !important;
  animation:hdrPillPulse 4.5s ease-in-out infinite !important;
}
@keyframes hdrPillPulse{
  0%,100%{box-shadow:0 0 14px -7px rgba(240,200,50,.34), 0 0 0 1px rgba(240,200,50,.06) inset;}
  50%    {box-shadow:0 0 22px -5px rgba(240,200,50,.6),  0 0 0 1px rgba(240,200,50,.1) inset;}
}
/* Plain title TEXT variants (not pills) — just lift to gold accent */
.cmd-bar .hdr-title, .cmd-bar .vmem-hdr-title, .cmd-bar .vmem-hdr-title-major{
  color:var(--gold,#f0c832) !important;
}

/* ── Status / live pills → gold-tinted command chips ──────────────── */
#hdr .hdr-live, #hdr .sys-pill, #hdr .hdr-status,
.cmd-bar .hdr-live, .cmd-bar .sys-pill, .cmd-bar .hdr-status{
  background:rgba(240,200,50,.06) !important;
  border:1px solid var(--gglow,rgba(240,200,50,.28)) !important;
  color:var(--t2,rgba(242,247,238,.88)) !important;
  border-radius:8px !important; letter-spacing:1px; text-transform:uppercase; font-size:10px !important;
}

/* ── Segmented gold action icons — every button variant ───────────── */
#hdr .hdr-icon-btn, #hdr .sys-notif-btn, #hdr .hdr-btn, #hdr .hdr-mute-btn,
#hdr .hdr-signout, #hdr .hdr-back, #hdr .hdr-back-btn,
.cmd-bar .hdr-icon-btn, .cmd-bar .sys-notif-btn, .cmd-bar .hdr-btn, .cmd-bar .hdr-mute-btn,
.cmd-bar .hdr-signout, .cmd-bar .hdr-back, .cmd-bar .hdr-back-btn, .cmd-bar .back-btn,
.cmd-bar .notif-bell-btn, .cmd-bar .notif-bell, .cmd-bar #hdr-notif-btn,
.cmd-bar .vmem-icon-btn, .cmd-bar .vmem-back-btn, .cmd-bar .ha-link-btn{
  width:auto; min-width:38px; height:38px !important; border-radius:10px !important;
  background:rgba(0,0,0,.3) !important;
  border:1px solid var(--border,rgba(255,255,255,.16)) !important;
  color:var(--t2,rgba(242,247,238,.88)) !important;
  transition:all .22s cubic-bezier(.16,1,.3,1) !important;
  display:inline-flex !important; align-items:center; justify-content:center;
}
#hdr .hdr-icon-btn:hover, #hdr .sys-notif-btn:hover, #hdr .hdr-btn:hover,
#hdr .hdr-mute-btn:hover, #hdr .hdr-signout:hover, #hdr .hdr-back:hover, #hdr .hdr-back-btn:hover,
.cmd-bar .hdr-icon-btn:hover, .cmd-bar .sys-notif-btn:hover, .cmd-bar .hdr-btn:hover,
.cmd-bar .hdr-mute-btn:hover, .cmd-bar .hdr-signout:hover, .cmd-bar .hdr-back:hover,
.cmd-bar .hdr-back-btn:hover, .cmd-bar .back-btn:hover, .cmd-bar .notif-bell-btn:hover,
.cmd-bar .notif-bell:hover, .cmd-bar #hdr-notif-btn:hover, .cmd-bar .vmem-icon-btn:hover,
.cmd-bar .vmem-back-btn:hover, .cmd-bar .ha-link-btn:hover{
  background:var(--gdim,rgba(240,200,50,.12)) !important;
  border-color:var(--gglow,rgba(240,200,50,.34)) !important;
  color:var(--gold,#f0c832) !important; transform:translateY(-1px) !important;
  /* premium glow-lift */
  box-shadow:0 6px 18px -8px rgba(240,200,50,.5), 0 0 0 1px rgba(240,200,50,.12) inset !important;
}
/* back buttons carry a "Dashboard"/label — let them widen for the text */
#hdr .hdr-back-btn, #hdr .hdr-back,
.cmd-bar .hdr-back-btn, .cmd-bar .hdr-back, .cmd-bar .back-btn, .cmd-bar .vmem-back-btn{ padding:0 13px !important; gap:8px; }
/* active alert state keeps its gold glow + shake (don't kill the animation) */
#hdr .sys-notif-btn.has-alerts, .cmd-bar .sys-notif-btn.has-alerts{ color:var(--gold,#f0c832) !important; border-color:var(--gglow,rgba(240,200,50,.4)) !important; }

/* Badges — crisp red count pill */
#hdr .hdr-icon-badge, #hdr .sys-notif-count,
.cmd-bar .hdr-icon-badge, .cmd-bar .sys-notif-count, .cmd-bar .notif-count,
.cmd-bar .notif-badge, .cmd-bar .hdr-notif-badge{
  background:var(--red,#ff4848) !important; color:#fff !important; font-weight:800 !important;
  border:2px solid #0a1308 !important;
}

/* ── User chip variants → premium, photo fills ───────────────────── */
#hdr .hdr-user-chip, #hdr .hdr-user,
.cmd-bar .hdr-user-chip, .cmd-bar .hdr-user, .cmd-bar .vmem-user-chip{
  background:rgba(0,0,0,.3) !important;
  border:1px solid var(--border,rgba(255,255,255,.16)) !important;
  border-radius:30px !important; padding:4px 12px 4px 4px !important; gap:9px !important;
  transition:border-color .22s cubic-bezier(.16,1,.3,1) !important;
  display:inline-flex !important; align-items:center;
}
#hdr .hdr-user-chip:hover, #hdr .hdr-user:hover,
.cmd-bar .hdr-user-chip:hover, .cmd-bar .hdr-user:hover, .cmd-bar .vmem-user-chip:hover{ border-color:var(--gglow,rgba(240,200,50,.34)) !important; }
#hdr .hdr-user-av, #hdr .hdr-avatar, #hdr .hdr-av, #hdr #hdr-av, #hdr #hdr-avatar,
.cmd-bar .hdr-user-av, .cmd-bar .hdr-avatar, .cmd-bar .hdr-av, .cmd-bar #hdr-av,
.cmd-bar #hdr-avatar, .cmd-bar .vmem-user-av, .cmd-bar #vmem-hdr-av{
  border:1px solid var(--gglow,rgba(240,200,50,.34)) !important; overflow:hidden !important;
}
#hdr .hdr-user-av img, #hdr .hdr-avatar img, #hdr .hdr-av img, #hdr #hdr-av img, #hdr #hdr-avatar img,
.cmd-bar .hdr-user-av img, .cmd-bar .hdr-avatar img, .cmd-bar .hdr-av img, .cmd-bar #hdr-av img,
.cmd-bar #hdr-avatar img, .cmd-bar .vmem-user-av img, .cmd-bar #vmem-hdr-av img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  border-radius:50% !important; display:block;
}
#hdr .hdr-name, #hdr #hdr-name,
.cmd-bar .hdr-name, .cmd-bar #hdr-name, .cmd-bar .hdr-uname, .cmd-bar .vmem-user-name{
  color:var(--t2,rgba(242,247,238,.88)) !important; font-weight:600 !important;
}

/* ── Brand wordmark — keep gold accent across variants ────────────── */
#hdr .hdr-logo, #hdr .brand-logo, #hdr .hdr-brand-logo,
.cmd-bar .hdr-logo, .cmd-bar .brand-logo, .cmd-bar .hdr-brand-logo, .cmd-bar .vmem-brand-logo,
.cmd-bar .hdr-brand-name{
  color:var(--gold,#f0c832) !important; letter-spacing:1.2px;
}
#hdr .hdr-divider, .cmd-bar .hdr-divider, .cmd-bar .hdr-sep, .cmd-bar .vmem-hdr-divider{
  background:var(--gglow,rgba(240,200,50,.22)) !important;
}

/* ── Mobile: shrink the clock, drop the long bits ─────────────────── */
@media(max-width:640px){
  #hdr .hdr-clock, #hdr #hdr-clock,
  .cmd-bar .hdr-clock, .cmd-bar #hdr-clock, .cmd-bar .hdr-wclock{ font-size:13px !important; padding:5px 8px !important; }
  #hdr .hdr-clock-tz, #hdr .hdr-date, #hdr #hdr-date,
  .cmd-bar .hdr-clock-tz, .cmd-bar .hdr-date, .cmd-bar .hdr-wclock-temp{ display:none !important; }
}