/* HSD Network Operations Center - shared Helios theme for the menu and
   mobile behavior. Loaded on every page after Bootstrap. Page content keeps
   its own styling; this file only unifies the top bar, dropdowns, tables on
   small screens, and a few district tokens. */
:root {
  --hsd-navy: #1B3A6B;
  --hsd-navy-deep: #122848;
  --hsd-navy-ink: #0b1a36;
  --hsd-gold: #C9A835;
  --hsd-gold-light: #e9d27a;
  --hsd-ok: #2fbf71;
  --hsd-warn: #e8a13a;
  --hsd-bad: #e05252;
}

/* ---- self contained layout for the shared navbar ----
   These rules let the menu render on pages that do not load Bootstrap's
   stylesheet (Bootstrap's own class names collide with several pages'
   custom styles). Bootstrap's JavaScript still drives the collapse and the
   dropdowns by toggling the .show class. */
.hsd-navbar { position: sticky; top: 0; z-index: 1020; display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box; }
.hsd-navbar *, .hsd-navbar *::before, .hsd-navbar *::after { box-sizing: border-box; }
.hsd-navbar .container-fluid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; padding: 0 0.5rem; margin: 0; max-width: none; }
.hsd-navbar .navbar-brand { text-decoration: none; margin-right: 1rem; white-space: nowrap; }
.hsd-navbar .navbar-toggler { display: none; background: transparent; border: 1px solid rgba(201, 168, 53, 0.5); border-radius: 8px; padding: 0.35rem 0.6rem; cursor: pointer; line-height: 1; }
.hsd-navbar .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: 100%; }
.hsd-navbar .navbar-collapse { display: flex; flex-grow: 1; align-items: center; }
.hsd-navbar .navbar-nav { display: flex; flex-direction: row; align-items: center; list-style: none; margin: 0 0 0 auto; padding: 0; gap: 0.1rem; }
.hsd-navbar .nav-item { position: relative; list-style: none; }
.hsd-navbar .nav-link { display: block; text-decoration: none; white-space: nowrap; }
.hsd-navbar .dropdown-toggle::after { content: ""; display: inline-block; margin-left: 0.35em; vertical-align: 0.2em; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-left: 0.3em solid transparent; }
.hsd-navbar .dropdown-menu { display: none; position: absolute; top: 100%; right: 0; left: auto; min-width: 12rem; list-style: none; margin: 0.25rem 0 0; z-index: 1030; }
.hsd-navbar .dropdown-menu.show { display: block; }
.hsd-navbar .dropdown-menu li { list-style: none; }
.hsd-navbar .dropdown-item { display: block; text-decoration: none; white-space: nowrap; }
.hsd-navbar .dropdown-divider { height: 0; margin: 0.4rem 0; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.12); }
@media (min-width: 992px) {
  .hsd-navbar, .hsd-navbar .container-fluid { flex-wrap: nowrap; }
  .hsd-navbar .navbar-collapse { min-width: 0; }
  .hsd-navbar .navbar-brand, .hsd-live { flex-shrink: 0; }
}
@media (max-width: 991.98px) {
  .hsd-navbar .navbar-toggler { display: inline-block; }
  .hsd-navbar .navbar-collapse { display: none; flex-basis: 100%; width: 100%; }
  .hsd-navbar .navbar-collapse.show, .hsd-navbar .navbar-collapse.collapsing { display: block; }
  .hsd-navbar .navbar-nav { flex-direction: column; align-items: stretch; margin: 0; }
  .hsd-navbar .dropdown-menu { position: static; min-width: 0; }
}

/* ---- the shared navbar ---- */
.hsd-navbar {
  background: linear-gradient(135deg, var(--hsd-navy-deep) 0%, var(--hsd-navy) 60%, #2a5298 100%);
  border-bottom: 1px solid rgba(201, 168, 53, 0.35);
  box-shadow: 0 6px 24px rgba(3, 10, 24, 0.35);
  padding: 0.35rem 0.75rem;
  font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
}
.hsd-navbar .hsd-brand {
  display: flex; align-items: center; gap: 0.6rem;
  color: #fff; font-weight: 500; letter-spacing: 0.04em; font-size: 0.98rem;
}
.hsd-navbar .hsd-brand b { color: var(--hsd-gold-light); letter-spacing: 0.22em; font-weight: 800; }
.hsd-navbar .hsd-brand img { height: 34px; width: auto; filter: drop-shadow(0 0 8px rgba(201, 168, 53, 0.35)); }
.hsd-navbar .nav-link {
  color: rgba(255, 255, 255, 0.86); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.04em;
  padding: 0.55rem 0.8rem; border-radius: 8px; transition: background 0.2s, color 0.2s;
}
.hsd-navbar .nav-link:hover, .hsd-navbar .nav-link:focus { color: var(--hsd-gold-light); background: rgba(201, 168, 53, 0.12); }
.hsd-navbar .nav-link.active { color: var(--hsd-gold-light); background: rgba(201, 168, 53, 0.18); box-shadow: inset 0 -2px 0 var(--hsd-gold); }
.hsd-navbar .navbar-toggler { border-color: rgba(201, 168, 53, 0.5); }
.hsd-navbar .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(201, 168, 53, 0.35); }
.hsd-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(233,210,122,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.hsd-navbar .dropdown-menu {
  background: var(--hsd-navy-ink); border: 1px solid rgba(201, 168, 53, 0.35);
  box-shadow: 0 18px 40px rgba(3, 10, 24, 0.5); border-radius: 12px; padding: 0.4rem;
}
.hsd-navbar .dropdown-item { color: rgba(255, 255, 255, 0.86); font-size: 0.86rem; border-radius: 8px; padding: 0.5rem 0.8rem; }
.hsd-navbar .dropdown-item:hover, .hsd-navbar .dropdown-item:focus { background: rgba(201, 168, 53, 0.14); color: var(--hsd-gold-light); }
.hsd-navbar .dropdown-item.active { background: rgba(201, 168, 53, 0.22); color: var(--hsd-gold-light); }
.hsd-navbar .dropdown-divider { border-color: rgba(255, 255, 255, 0.12); }

/* collapsed menu on phones: a full width dark panel */
@media (max-width: 991.98px) {
  .hsd-navbar .navbar-collapse {
    background: var(--hsd-navy-ink); border: 1px solid rgba(201, 168, 53, 0.35);
    border-radius: 12px; margin-top: 0.5rem; padding: 0.5rem;
  }
  .hsd-navbar .dropdown-menu { position: static; float: none; margin-left: 0.6rem; border: none; box-shadow: none; background: rgba(255, 255, 255, 0.03); }
}

/* ---- mobile friendliness applied everywhere ---- */
html.hsd-has-nav body { padding-top: 0; }
.hsd-table-wrap { -webkit-overflow-scrolling: touch; }
.hsd-table-wrap > table { min-width: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; }
@media (max-width: 767.98px) {
  h1 { font-size: clamp(1.35rem, 5vw, 2rem); }
  h2 { font-size: clamp(1.15rem, 4.2vw, 1.6rem); }
  .container, .container-fluid { padding-left: 0.85rem; padding-right: 0.85rem; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* ---- live district status chip in the bar ---- */
.hsd-live {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; margin-right: 0.75rem;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85); text-decoration: none; background: rgba(6, 15, 34, 0.55);
  border: 1px solid rgba(201, 168, 53, 0.35); border-radius: 999px; padding: 0.3rem 0.7rem; white-space: nowrap;
}
.hsd-live:hover { color: var(--hsd-gold-light); }
.hsd-live .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.hsd-live.ok .dot { background: var(--hsd-ok); box-shadow: 0 0 10px var(--hsd-ok); }
.hsd-live.warn .dot { background: var(--hsd-warn); box-shadow: 0 0 10px var(--hsd-warn); }
.hsd-live.bad .dot { background: var(--hsd-bad); box-shadow: 0 0 10px var(--hsd-bad); animation: hsdblink 1s ease-in-out infinite; }
@keyframes hsdblink { 50% { opacity: 0.35; } }
@media (max-width: 991.98px) { .hsd-live { margin-right: 0.5rem; font-size: 0.66rem; padding: 0.25rem 0.55rem; } }
@media (max-width: 420px) { .hsd-live .txt { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; } }

/* narrow phones: keep the bar to one line (logo, status chip, menu button) */
@media (max-width: 575.98px) {
  .hsd-navbar .hsd-brand span { display: none; }
  .hsd-navbar .hsd-brand img { height: 30px; }
  .hsd-live { font-size: 0.62rem; padding: 0.22rem 0.5rem; }
}