/* Plugfest event theme — laptop-first overrides on top of Bootstrap 5.3.
   Design targets: 1280–1536 px viewport, dense forms, per-event accent color. */

:root {
  --pf-accent: #0d6efd; /* overridden per event from Event.theme_color */
  --pf-max-width: 1400px;
  --pf-pass: #198754;
  --pf-fail: #dc3545;
  --pf-na: #6c757d;
  --pf-page-bg: #eef4f7;
  --pf-grid-row-bg: #edf3f6;
  --pf-grid-row-even-bg: #e7eff3;
  --pf-input-bg: #f8fbfc;
  --pf-pending-bg: #fff4cc;
  --pf-error-bg: #fff0f2;
  --pf-ops-surface: #fff;
  --pf-surface-raised: #f7fbfc;
  --pf-ops-accent-mix: #18313f;
  --pf-action-accent: var(--pf-accent);
  --pf-accent-highlight: color-mix(in srgb, var(--pf-accent) 82%, #177da3);
  --pf-nav-auth-on-accent: #ffe09a;
  --pf-nav-auth-on-surface: #8b4c00;
  --bs-body-color: #18313f;
  --bs-body-color-rgb: 24, 49, 63;
  --bs-body-bg: #eef4f7;
  --bs-body-bg-rgb: 238, 244, 247;
  --bs-emphasis-color: #0c2432;
  --bs-emphasis-color-rgb: 12, 36, 50;
  --bs-secondary-color: #5f7885;
  --bs-secondary-color-rgb: 95, 120, 133;
  --bs-secondary-bg: #e7eff3;
  --bs-secondary-bg-rgb: 231, 239, 243;
  --bs-tertiary-color: #78909b;
  --bs-tertiary-color-rgb: 120, 144, 155;
  --bs-tertiary-bg: #f7fbfc;
  --bs-tertiary-bg-rgb: 247, 251, 252;
  --bs-border-color: #c7d7df;
  --bs-border-color-translucent: rgb(49 86 106 / 18%);
  --bs-link-color: #0b678a;
  --bs-link-color-rgb: 11, 103, 138;
  --bs-link-hover-color: #074c67;
  --bs-link-hover-color-rgb: 7, 76, 103;
  --bs-body-font-size: 0.925rem; /* denser than Bootstrap's 1rem default */
}

[data-bs-theme="dark"] {
  --pf-pass: #71c8a1;
  --pf-fail: #f08c95;
  --pf-na: #9bbbc9;
  --pf-page-bg: #071421;
  --pf-grid-row-bg: #0f2838;
  --pf-grid-row-even-bg: #0c2230;
  --pf-input-bg: #122c3d;
  --pf-pending-bg: #594708;
  --pf-error-bg: #4a2029;
  --pf-ops-surface: #0d2232;
  --pf-surface-raised: #163548;
  --pf-ops-accent-mix: white;
  --pf-action-accent: var(--pf-accent);
  --pf-accent-highlight: color-mix(in srgb, var(--pf-accent) 68%, #9edcf0);
  --pf-nav-auth-on-accent: #ffe09a;
  --pf-nav-auth-on-surface: #ffd27a;
  --bs-body-color: #edf6fb;
  --bs-body-color-rgb: 237, 246, 251;
  --bs-body-bg: #071421;
  --bs-body-bg-rgb: 7, 20, 33;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #9bbbc9;
  --bs-secondary-color-rgb: 155, 187, 201;
  --bs-secondary-bg: #0d2232;
  --bs-secondary-bg-rgb: 13, 34, 50;
  --bs-tertiary-color: #789baa;
  --bs-tertiary-color-rgb: 120, 155, 170;
  --bs-tertiary-bg: #122c3d;
  --bs-tertiary-bg-rgb: 18, 44, 61;
  --bs-border-color: #31566a;
  --bs-border-color-translucent: rgb(155 187 201 / 22%);
  --bs-link-color: #8ed5ed;
  --bs-link-color-rgb: 142, 213, 237;
  --bs-link-hover-color: #c2edfa;
  --bs-link-hover-color-rgb: 194, 237, 250;
}

/* Always reserve space for the vertical scrollbar so the page doesn't shift
   sideways ("scrunch") when navigating between a short page and a tall one,
   or when content grows past the viewport. */
html {
  scrollbar-gutter: stable;
}

body {
  background-color: var(--pf-page-bg);
}

.pf-navbar {
  background-color: var(--pf-accent);
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
}

[data-bs-theme="light"] body {
  background:
    radial-gradient(
      circle at 92% 4%,
      color-mix(in srgb, var(--pf-accent) 7%, transparent) 0,
      transparent 27rem
    ),
    linear-gradient(145deg, #f8fbfc 0%, #eef4f7 56%, #eaf2f5 100%);
  background-attachment: fixed;
}

[data-bs-theme="light"] .card {
  --bs-card-bg: var(--pf-ops-surface);
  --bs-card-border-color: var(--bs-border-color);
  box-shadow: 0 0.4rem 1.1rem rgb(31 65 83 / 7%);
}

[data-bs-theme="light"] .dropdown-menu {
  --bs-dropdown-bg: var(--pf-surface-raised);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
  --bs-dropdown-link-hover-bg: color-mix(
    in srgb,
    var(--pf-accent) 7%,
    var(--pf-surface-raised)
  );
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
  border-color: var(--bs-border-color);
  background-color: var(--pf-input-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="light"] .form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
  border-color: var(--pf-accent-highlight);
  background-color: #fff;
  color: var(--bs-emphasis-color);
  box-shadow: 0 0 0 0.2rem
    color-mix(in srgb, var(--pf-accent-highlight) 18%, transparent);
}

[data-bs-theme="dark"] body {
  background:
    radial-gradient(
      circle at 92% 4%,
      color-mix(in srgb, var(--pf-accent) 11%, transparent) 0,
      transparent 27rem
    ),
    linear-gradient(145deg, #071421 0%, #091925 52%, #071723 100%);
  background-attachment: fixed;
}

[data-bs-theme="dark"] .card {
  --bs-card-bg: var(--pf-ops-surface);
  --bs-card-border-color: var(--bs-border-color);
  box-shadow: 0 0.45rem 1.25rem rgb(0 0 0 / 16%);
}

[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--pf-surface-raised);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
  --bs-dropdown-link-hover-bg: color-mix(
    in srgb,
    var(--pf-accent) 15%,
    var(--pf-surface-raised)
  );
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  border-color: var(--bs-border-color);
  background-color: var(--pf-input-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: var(--pf-accent-highlight);
  background-color: var(--pf-input-bg);
  color: var(--bs-emphasis-color);
  box-shadow: 0 0 0 0.2rem
    color-mix(in srgb, var(--pf-accent-highlight) 25%, transparent);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled {
  background-color: var(--pf-ops-surface);
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .text-bg-light {
  border-color: var(--bs-border-color) !important;
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-light {
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
}

/* ---- Layout ------------------------------------------------------------ */

.pf-container,
.pf-main {
  max-width: var(--pf-max-width);
  margin-inline: auto;
}

.pf-main {
  padding: 1.5rem 1rem 3rem;
}

/* Wide pages (data grids): use the full window like the legacy forms did. */
.pf-main-wide {
  max-width: none;
}

.pf-narrow {
  max-width: 760px;
  margin-inline: auto;
}

.pf-page-header {
  margin-bottom: 1.25rem;
}

/* ---- Event landing ------------------------------------------------------ */

.pf-main-landing {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 56px);
  max-width: none;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.5rem) 1rem 4rem;
  background:
    radial-gradient(
      circle at 82% 8%,
      color-mix(in srgb, var(--pf-accent) 35%, transparent) 0,
      transparent 28rem
    ),
    radial-gradient(
      circle at 8% 72%,
      rgb(21 112 145 / 18%) 0,
      transparent 32rem
    ),
    linear-gradient(145deg, #071421 0%, #0a1d2e 46%, #071723 100%);
  color: #edf6fb;
}

.pf-main-landing::before {
  position: absolute;
  z-index: -2;
  inset: -44px;
  background-image:
    linear-gradient(rgb(167 220 239 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(167 220 239 / 4%) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 94%);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: pf-grid-drift 28s linear infinite;
}

.pf-main-landing::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(5 15 25 / 72%),
    transparent 28%,
    transparent 72%,
    rgb(5 15 25 / 42%)
  );
  content: "";
  pointer-events: none;
}

.pf-landing-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1180px);
  margin-inline: auto;
}

.pf-landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.42fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  min-height: 17rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.pf-landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  color: #9bc5d8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pf-landing-eyebrow span {
  width: 1.8rem;
  height: 1px;
  background: color-mix(in srgb, var(--pf-accent) 70%, white);
  box-shadow: 0 0 0.75rem color-mix(in srgb, var(--pf-accent) 70%, transparent);
}

.pf-landing-hero h1 {
  max-width: 20ch;
  margin: 0;
  color: #f5fbff;
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
  text-shadow: 0 0.8rem 2.4rem rgb(0 0 0 / 24%);
}

.pf-event-meta {
  display: grid;
  gap: 0;
  margin: 0;
  border-block: 1px solid rgb(176 224 241 / 18%);
}

.pf-event-meta-item {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgb(176 224 241 / 10%);
}

.pf-event-meta-item:last-child {
  border-bottom: 0;
}

.pf-event-meta dt {
  color: #7ca9bd;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pf-event-meta dd {
  margin: 0;
  color: #e8f4f9;
  font-size: 0.95rem;
  font-weight: 550;
}

.pf-landing-intro {
  max-width: 62ch;
  margin: 1.2rem 0 0;
  color: #a9c3cf;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  line-height: 1.7;
}

.pf-landing-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  margin-top: 1.35rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--pf-accent) 62%, white);
  color: #e9f7fc;
  font-weight: 600;
  text-decoration: none;
  transition:
    color 160ms ease,
    gap 160ms ease,
    border-color 160ms ease;
}

.pf-landing-summary:hover {
  gap: 0.8rem;
  border-color: #f5fbff;
  color: #fff;
}

.pf-landing-notice {
  grid-column: 1 / -1;
  margin-top: -1rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgb(214 229 236 / 20%);
  border-radius: 0.5rem;
  background: rgb(7 20 32 / 55%);
  color: #d7e6ed;
}

.pf-signal-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.pf-signal-track {
  position: absolute;
  left: -15vw;
  width: 130vw;
  height: 1px;
  opacity: 0.42;
  background: linear-gradient(
    90deg,
    transparent 0 10%,
    rgb(123 192 218 / 18%) 28%,
    color-mix(in srgb, var(--pf-accent) 68%, white) 49%,
    rgb(123 192 218 / 16%) 72%,
    transparent 90%
  );
  background-size: 45% 100%;
  transform-origin: center;
  animation: pf-signal-flow 9s linear infinite;
}

.pf-signal-track::after {
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d6f5ff;
  box-shadow: 0 0 0.85rem color-mix(in srgb, var(--pf-accent) 75%, white);
  content: "";
  animation: pf-packet-travel 7s ease-in-out infinite;
}

.pf-signal-track-a {
  top: 18%;
  transform: rotate(-8deg);
}

.pf-signal-track-b {
  top: 48%;
  opacity: 0.28;
  transform: rotate(5deg);
  animation-delay: -3s;
}

.pf-signal-track-b::after {
  animation-delay: -2.5s;
}

.pf-signal-track-c {
  top: 76%;
  opacity: 0.2;
  transform: rotate(-3deg);
  animation-delay: -6s;
}

.pf-signal-track-c::after {
  animation-delay: -5s;
}

.pf-signal-node {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid rgb(217 246 255 / 75%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--pf-accent) 65%, #bfeeff);
  box-shadow: 0 0 0 0 rgb(145 219 244 / 0%);
  animation: pf-node-pulse 4s ease-out infinite;
}

.pf-signal-node-a {
  top: 17%;
  left: 74%;
}
.pf-signal-node-b {
  top: 51%;
  left: 12%;
  animation-delay: -1.4s;
}
.pf-signal-node-c {
  top: 74%;
  left: 62%;
  animation-delay: -2.8s;
}

@keyframes pf-grid-drift {
  to {
    transform: translate3d(44px, 44px, 0);
  }
}

@keyframes pf-signal-flow {
  to {
    background-position: 130vw 0;
  }
}

@keyframes pf-packet-travel {
  0%,
  8% {
    left: 8%;
    opacity: 0;
  }
  18%,
  82% {
    opacity: 1;
  }
  92%,
  100% {
    left: 92%;
    opacity: 0;
  }
}

@keyframes pf-node-pulse {
  0%,
  35% {
    box-shadow: 0 0 0 0 rgb(145 219 244 / 38%);
  }
  78%,
  100% {
    box-shadow: 0 0 0 1.1rem rgb(145 219 244 / 0%);
  }
}

.pf-directory-heading {
  display: flex;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pf-directory-heading > div {
  flex: 0 0 auto;
}

.pf-directory-heading p {
  margin: 0 0 0.2rem;
  color: #75a5ba;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pf-directory-heading h2 {
  margin: 0;
  color: #f0f8fc;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pf-directory-heading > span {
  width: 100%;
  height: 1px;
  margin-bottom: 0.35rem;
  background: linear-gradient(90deg, rgb(165 216 235 / 24%), transparent);
}

.pf-landing-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
}

.pf-landing-section {
  min-width: 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(158 211 231 / 16%);
}

.pf-landing-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.pf-landing-section-heading h3 {
  margin: 0;
  color: #cce2ec;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pf-landing-page-count {
  color: color-mix(in srgb, var(--pf-accent) 55%, #b9dfed);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.pf-landing-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.55rem;
}

.pf-landing-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  min-height: 62px;
  padding: 0.75rem 0.85rem 0.75rem 0.95rem;
  border: 1px solid rgb(174 220 237 / 12%);
  border-radius: 0.45rem;
  background: linear-gradient(105deg, rgb(17 44 62 / 68%), rgb(12 33 48 / 34%));
  color: #e8f5fa;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.pf-landing-link:hover {
  border-color: color-mix(in srgb, var(--pf-accent) 48%, #9dcfe1);
  background: linear-gradient(105deg, rgb(24 58 78 / 86%), rgb(16 41 57 / 58%));
  color: #fff;
  box-shadow:
    0 0.7rem 1.8rem rgb(0 0 0 / 18%),
    inset 2px 0 0 color-mix(in srgb, var(--pf-accent) 72%, white);
  transform: translateY(-2px);
}

.pf-landing-link:focus-visible,
.pf-landing-summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pf-accent) 52%, #d9f5ff);
  outline-offset: 3px;
}

.pf-landing-link-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}

.pf-landing-link-title {
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.pf-landing-access {
  color: #88b2c4;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pf-landing-arrow {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--pf-accent) 58%, #caeffb);
  font-size: 1.25rem;
  line-height: 1;
}

.pf-landing-empty {
  grid-column: 1 / -1;
  padding: 2rem;
  border: 1px dashed rgb(166 217 235 / 24%);
  border-radius: 0.5rem;
  color: #d7e9f0;
  text-align: center;
}

.pf-landing-empty h3 {
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
}

.pf-landing-empty p {
  margin: 0;
  color: #8eafbd;
}

@media (max-width: 767.98px) {
  .pf-main-landing {
    min-height: calc(100vh - 54px);
    padding: 1.75rem 0.9rem 3rem;
  }

  .pf-landing-hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    min-height: 0;
    margin-bottom: 2.6rem;
  }

  .pf-landing-directory {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .pf-event-meta {
    max-width: 30rem;
  }

  .pf-signal-track {
    width: 150vw;
    opacity: 0.24;
  }
}

@media (max-width: 420px) {
  .pf-main-landing {
    padding-inline: 0.75rem;
  }

  .pf-landing-hero h1 {
    font-size: clamp(2.05rem, 11vw, 2.8rem);
  }

  .pf-directory-heading {
    align-items: flex-start;
  }

  .pf-directory-heading > span {
    margin-top: 1.85rem;
  }

  .pf-landing-section-heading {
    align-items: flex-start;
  }

  .pf-landing-links {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-main-landing::before,
  .pf-signal-track,
  .pf-signal-track::after,
  .pf-signal-node {
    animation: none;
  }

  .pf-landing-link {
    transition: none;
  }

  .pf-landing-link:hover {
    transform: none;
  }
}

/* ---- Navbar (event accent) --------------------------------------------- */

.pf-navbar {
  background-color: var(--pf-accent);
}

.pf-navbar .nav-link.pf-nav-auth-link {
  color: var(--pf-nav-auth-on-accent);
  font-weight: 650;
}

.pf-navbar .nav-link.pf-nav-auth-link:hover,
.pf-navbar .nav-link.pf-nav-auth-link:focus-visible,
.pf-navbar .nav-link.pf-nav-auth-link.show {
  color: #fff3d2;
}

.pf-navbar .dropdown-menu .dropdown-item.pf-nav-auth-link {
  color: var(--pf-nav-auth-on-surface);
  font-weight: 650;
}

.pf-nav-auth-mark {
  display: inline-block;
  margin-right: 0.32rem;
  font-size: 0.72em;
  line-height: 1;
  transform: translateY(-0.03rem);
}

.pf-theme-picker .dropdown-menu {
  min-width: 8.5rem;
}

.pf-theme-symbol {
  display: inline-block;
  margin-right: 0.2rem;
  font-size: 1.05rem;
  line-height: 1;
  transform: translateY(0.05rem);
}

.pf-theme-option {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.pf-theme-check {
  width: 0.85rem;
  visibility: hidden;
  color: var(--pf-accent);
  font-weight: 700;
}

.pf-theme-option[aria-pressed="true"] .pf-theme-check {
  visibility: visible;
  color: currentColor;
}

/* On laptop widths the navigation stays in the bar. On smaller screens it
   becomes a fixed left drawer, so opening it never pushes page content down. */
.pf-nav-drawer {
  --bs-offcanvas-width: min(86vw, 20rem);
}

@media (max-width: 991.98px) {
  .pf-nav-drawer {
    border-right: 1px solid rgb(255 255 255 / 16%);
    background:
      radial-gradient(
        circle at 8% 4%,
        color-mix(in srgb, var(--pf-accent) 48%, transparent) 0,
        transparent 18rem
      ),
      color-mix(in srgb, var(--pf-accent) 78%, #071421);
    box-shadow: 0.75rem 0 2rem rgb(3 15 24 / 28%);
    color: #fff;
  }

  .pf-nav-drawer .offcanvas-header {
    border-bottom: 1px solid rgb(255 255 255 / 16%);
    padding: 1rem 1.1rem;
  }

  .pf-nav-drawer .offcanvas-body {
    overflow-y: auto;
    padding: 0.75rem 1rem 1.5rem;
  }

  .pf-nav-drawer .navbar-nav {
    gap: 0.15rem;
  }

  .pf-nav-drawer .nav-link {
    border-radius: 0.5rem;
    padding: 0.7rem 0.75rem;
    color: rgb(255 255 255 / 88%);
  }

  .pf-nav-drawer .nav-link:hover,
  .pf-nav-drawer .nav-link:focus-visible,
  .pf-nav-drawer .nav-link.show {
    background: rgb(255 255 255 / 12%);
    color: #fff;
  }

  .pf-nav-drawer .dropdown-menu {
    position: static;
    margin: 0.2rem 0 0.55rem 0.75rem;
    box-shadow: none;
  }
}

/* ---- Accent buttons ----------------------------------------------------- */

.pf-btn-accent {
  --bs-btn-bg: var(--pf-action-accent);
  --bs-btn-border-color: var(--pf-action-accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--pf-action-accent) 84%, black);
  --bs-btn-hover-border-color: color-mix(
    in srgb,
    var(--pf-action-accent) 84%,
    black
  );
  --bs-btn-active-bg: color-mix(in srgb, var(--pf-action-accent) 72%, black);
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--pf-action-accent);
  --bs-btn-border-color: var(--pf-action-accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--pf-action-accent) 84%, black);
  --bs-btn-hover-border-color: color-mix(
    in srgb,
    var(--pf-action-accent) 84%,
    black
  );
  --bs-btn-active-bg: color-mix(in srgb, var(--pf-action-accent) 72%, black);
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--pf-action-accent) 72%,
    black
  );
}

.pf-link {
  color: var(--pf-accent-highlight);
}

.nav-pills .nav-link.active {
  background-color: var(--pf-action-accent);
}

/* Module/Cable tabs: outline the unselected tabs so they don't read as plain
   text sitting on the page. */
.pf-grid-tabs .nav-link {
  border: 1px solid var(--bs-border-color);
  background-color: var(--pf-ops-surface);
}

.pf-grid-tabs .nav-link:hover {
  border-color: var(--pf-accent-highlight);
}

.pf-grid-tabs .nav-link.active {
  border-color: var(--pf-accent-highlight);
}

/* ---- Forms: density + question layout ---------------------------------- */

.pf-question label.form-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.pf-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--pf-na);
  color: #fff;
  font-size: 0.7rem;
  font-style: normal;
  cursor: help;
  vertical-align: text-top;
}

/* Segmented button groups (Bootstrap btn-group of radios) */
.pf-segmented .btn {
  min-width: 4rem;
}

.pf-segmented .btn-check:checked + .btn {
  background-color: var(--pf-action-accent);
  border-color: var(--pf-action-accent);
  color: #fff;
}

/* Long/many-option choice sets: wrapping pills instead of a joined group */
.pf-choice-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pf-choice-pills .btn {
  border-radius: var(--bs-border-radius);
}

/* Pass/fail/N-A semantic states for result values */
.pf-pass {
  color: var(--pf-pass);
  font-weight: 600;
}
.pf-fail {
  color: var(--pf-fail);
  font-weight: 600;
}
.pf-na {
  color: var(--pf-na);
}

/* ---- Question grid layouts ---------------------------------------------- */

.pf-qgrid.pf-layout-columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}

.pf-qgrid.pf-layout-columns-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1rem;
}

.pf-qgrid .pf-question.pf-w-half {
  grid-column: span 1;
}
.pf-qgrid.pf-layout-stack .pf-question.pf-w-half {
  max-width: 50%;
}
.pf-qgrid.pf-layout-columns-2 .pf-question:not(.pf-w-half):not(.pf-w-third),
.pf-qgrid.pf-layout-columns-3 .pf-question:not(.pf-w-half):not(.pf-w-third) {
  grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
  .pf-qgrid.pf-layout-columns-2,
  .pf-qgrid.pf-layout-columns-3 {
    display: block;
  }
  .pf-qgrid.pf-layout-stack .pf-question.pf-w-half {
    max-width: 100%;
  }
}

.pf-note {
  font-size: 0.875rem;
}

/* ---- Side A / Side B mirrored panels ------------------------------------ */

.pf-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.pf-sides > :nth-child(2) {
  min-width: 0;
  border-inline-start: 2px solid color-mix(in srgb, var(--pf-accent) 35%, var(--bs-border-color));
  padding-inline-start: 1rem;
}

/* A text control avoids password-manager prompts; Chromium still masks it. */
.pf-pin-input {
  -webkit-text-security: disc;
  font-variant-numeric: tabular-nums;
}

.pf-topology {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.pf-topology .ts-wrapper.single .ts-control {
  flex-wrap: nowrap;
}

.pf-topology .ts-wrapper.single .ts-control > .item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-invalid-choice .btn {
  border-color: var(--bs-form-invalid-border-color);
  color: var(--bs-form-invalid-color);
}

.ts-wrapper.is-invalid .ts-control,
.ts-control.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .15);
}

/* Theme input rules are more specific than Bootstrap's validation selectors. */
[data-bs-theme] .form-control.is-invalid,
[data-bs-theme] .form-select.is-invalid,
[data-bs-theme] .ts-wrapper.is-invalid .ts-control,
[data-bs-theme] .ts-control.is-invalid {
  border-color: var(--bs-form-invalid-border-color) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .2);
}

@media (max-width: 991.98px) {
  .pf-sides,
  .pf-topology {
    grid-template-columns: 1fr;
  }

  .pf-sides > :nth-child(2) {
    border-inline-start: 0;
    border-top: 2px solid color-mix(in srgb, var(--pf-accent) 35%, var(--bs-border-color));
    padding-inline-start: 0;
    padding-top: 1rem;
  }
}

/* ---- Interconnect grid ---------------------------------------------------- */

/* Reserve constant space for the status banner so its appearance ("Unsaved
   changes…") never shifts the grid mid-edit — the table must not move while
   an editor popup is anchored to it. */
#pf-grid-status {
  min-height: 46px;
}

/* Make editable cells read as inputs: white field on a muted row, border
   that answers on hover. Read-only cells (ID, Vendor, gated-off) stay flat. */
#pf-grid .tabulator-row {
  background-color: var(--pf-grid-row-bg);
}

#pf-grid .tabulator-row.tabulator-row-even {
  background-color: var(--pf-grid-row-even-bg);
}

#pf-grid .tabulator-cell.tabulator-editable {
  background-color: var(--pf-input-bg);
  box-shadow: inset 0 0 0 1px var(--bs-border-color);
  border-radius: 3px;
  cursor: text;
}

#pf-grid .tabulator-cell.tabulator-editable:hover {
  box-shadow: inset 0 0 0 2px var(--pf-accent-highlight);
}

#pf-grid .tabulator-cell.tabulator-editing {
  box-shadow: inset 0 0 0 2px var(--pf-accent-highlight);
}

.pf-cell-changed {
  background-color: var(
    --pf-pending-bg
  ) !important; /* pending-save highlight */
}

/* Bootstrap and the two vendored controls all follow the same system-selected
   theme. Keep these small theme bridges here instead of modifying vendored
   files. */
[data-bs-theme="light"] .ts-control,
[data-bs-theme="light"] .ts-dropdown {
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="light"] .ts-control {
  background: var(--pf-input-bg);
}

[data-bs-theme="light"] .ts-dropdown {
  background: var(--pf-surface-raised);
}

[data-bs-theme="dark"] .ts-control,
[data-bs-theme="dark"] .ts-dropdown {
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-control {
  background: var(--pf-input-bg);
}

[data-bs-theme="dark"] .ts-dropdown {
  background: var(--pf-surface-raised);
}

[data-bs-theme="dark"] .ts-control > input,
[data-bs-theme="dark"] .ts-control .item,
[data-bs-theme="dark"] .ts-dropdown .option,
[data-bs-theme="dark"] .ts-dropdown .create {
  color: var(--bs-body-color) !important;
  -webkit-text-fill-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-control > input::placeholder {
  color: var(--bs-secondary-color) !important;
  -webkit-text-fill-color: var(--bs-secondary-color);
  opacity: 1;
}

[data-bs-theme="dark"] .ts-wrapper.disabled .ts-control,
[data-bs-theme="dark"] .ts-wrapper.disabled .ts-control .item {
  color: var(--bs-secondary-color) !important;
  -webkit-text-fill-color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .ts-dropdown .active,
[data-bs-theme="dark"] .ts-dropdown .create:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] #pf-grid,
[data-bs-theme="dark"] #pf-grid .tabulator-header,
[data-bs-theme="dark"] #pf-grid .tabulator-header .tabulator-col,
[data-bs-theme="dark"] #pf-grid .tabulator-table,
[data-bs-theme="dark"] #pf-grid .tabulator-footer,
[data-bs-theme="dark"] #pf-grid .tabulator-popup-container {
  border-color: var(--bs-border-color);
  background: var(--pf-ops-surface);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] #pf-grid .tabulator-header,
[data-bs-theme="dark"] #pf-grid .tabulator-header .tabulator-col,
[data-bs-theme="dark"] #pf-grid .tabulator-footer,
[data-bs-theme="dark"] #pf-grid .tabulator-popup-container {
  background: var(--pf-surface-raised);
}

[data-bs-theme="dark"] #pf-grid .tabulator-header .tabulator-col:hover,
[data-bs-theme="dark"] #pf-grid .tabulator-menu-item:hover {
  background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] #pf-grid input,
[data-bs-theme="dark"] #pf-grid select,
[data-bs-theme="dark"] #pf-grid textarea {
  border-color: var(--bs-border-color);
  background: var(--pf-input-bg);
  color: var(--bs-body-color);
}

/* ---- Form action bar (submit/cancel footer strip) ------------------------ */

.pf-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

/* ---- Test-session topology & inactive states ----------------------------- */

.pf-card-hidden {
  visibility: hidden;
}

.pf-side-inactive {
  opacity: 0.35;
  pointer-events: none;
}

/* ---- Simple CSS bar charts (attendance dashboard) ------------------------ */

.pf-barchart {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  height: 220px;
}

.pf-barchart-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.pf-barchart-value {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.pf-barchart-bar {
  width: 70%;
  min-height: 2px;
  background: var(--pf-accent-highlight);
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
}

.pf-barchart-label {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.pf-hbar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.pf-hbar-label {
  flex: 0 0 7rem;
  font-size: 0.85rem;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-hbar-track {
  flex: 1 1 auto;
  background: var(--bs-tertiary-bg);
  border-radius: 3px;
  height: 1.1rem;
}

.pf-hbar-fill {
  height: 100%;
  min-width: 2px;
  background: var(--pf-accent-highlight);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.pf-hbar-value {
  flex: 0 0 2rem;
  font-weight: 600;
  font-size: 0.85rem;
}

/* ---- Density layer (test-session page content wrapper) ------------------- */

.pf-dense .pf-question {
  margin-bottom: 0.5rem;
}

.pf-dense .form-control,
.pf-dense .form-select {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.pf-dense .pf-segmented .btn {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.pf-dense .card-body {
  padding: 1rem;
}

.pf-dense .pf-sides {
  gap: 0.5rem;
}

.pf-dense label.form-label {
  margin-bottom: 0.125rem;
}

.pf-dense .pf-help-icon {
  width: 0.85rem;
  height: 0.85rem;
  font-size: 0.6rem;
}

/* ---- Tables ------------------------------------------------------------- */

.pf-table-sticky thead th {
  position: sticky;
  top: 0;
  background: var(--bs-body-bg);
  z-index: 1;
}

[data-bs-theme="dark"] .pf-table-sticky thead th {
  background: var(--pf-ops-surface);
}
.pf-cell-server-error {
  box-shadow: inset 0 0 0 2px #dc3545;
  background-color: var(--pf-error-bg) !important;
}

/* ---- Results workbook preview ------------------------------------------ */

.pf-report-preview {
  --pf-report-border: color-mix(
    in srgb,
    var(--pf-accent-highlight) 24%,
    var(--bs-border-color)
  );
}

.pf-report-hero {
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: calc(1rem - 1px);
  overflow: hidden;
  border: 1px solid var(--pf-report-border);
  border-radius: var(--bs-card-border-radius);
  background:
    radial-gradient(
      circle at 90% 5%,
      color-mix(in srgb, var(--pf-accent-highlight) 28%, transparent) 0,
      transparent 36%
    ),
    linear-gradient(
      130deg,
      color-mix(in srgb, var(--pf-accent) 22%, var(--pf-ops-surface)),
      color-mix(in srgb, var(--pf-accent) 8%, var(--pf-surface-raised))
    );
  color: var(--bs-emphasis-color);
  box-shadow: 0 0.75rem 1.8rem rgb(15 23 42 / 10%);
}

.pf-report-kpi {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  padding: 1rem;
  border: 1px solid var(--pf-report-border);
  border-radius: 0.85rem;
  background: var(--pf-ops-surface);
  box-shadow: 0 0.35rem 0.9rem rgb(15 23 42 / 6%);
}

.pf-report-kpi strong {
  display: block;
  color: color-mix(
    in srgb,
    var(--pf-accent-highlight) 76%,
    var(--bs-emphasis-color)
  );
  font-size: 1.65rem;
  line-height: 1;
}

.pf-report-section {
  --bs-card-border-color: var(--pf-report-border);
  --bs-card-border-radius: 0.85rem;
  --bs-card-inner-border-radius: calc(0.85rem - 1px);
  overflow: hidden;
  border: 1px solid var(--pf-report-border);
  border-radius: var(--bs-card-border-radius);
  background: var(--pf-ops-surface);
  background-clip: border-box;
}

.pf-report-section > .card-header {
  position: relative;
  z-index: 1;
  border-bottom-color: var(--pf-report-border);
  background: color-mix(
    in srgb,
    var(--pf-accent) 6%,
    var(--pf-surface-raised)
  );
  color: var(--bs-emphasis-color);
}

.pf-report-table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: color-mix(
    in srgb,
    var(--pf-accent) 8%,
    var(--pf-ops-surface)
  );
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--pf-report-border);
  margin: 0;
}

.pf-report-table th {
  color: var(--bs-emphasis-color);
  white-space: nowrap;
}

.pf-report-table td {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pf-report-table thead th {
  border-bottom-width: 1px;
  background: color-mix(
    in srgb,
    var(--pf-accent) 6%,
    var(--pf-surface-raised)
  );
}

.pf-report-section
  > .table-responsive:last-child
  .pf-report-table
  tbody
  tr:last-child
  > * {
  border-bottom-width: 0;
}

.pf-report-table-compact {
  min-width: 42rem;
}

.pf-report-table-wide {
  min-width: 68rem;
}

.pf-report-sheet-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pf-report-sheet-list code {
  display: inline-block;
  padding: 0.16rem 0.38rem;
  border: 1px solid var(--pf-report-border);
  border-radius: 0.35rem;
  background: var(--pf-surface-raised);
  white-space: nowrap;
}

.pf-report-notice {
  border-width: 1px;
  border-radius: 0.85rem;
}

.pf-report-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pf-report-download-option {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.pf-report-download-option:first-child {
  border-bottom: 1px solid var(--pf-report-border);
  padding-bottom: 1.5rem;
}

.pf-report-download-action {
  align-self: flex-start;
  max-width: 100%;
  margin-top: auto;
  white-space: normal;
}

.pf-report-company-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

@media (min-width: 768px) {
  .pf-report-download-option:first-child {
    border-right: 1px solid var(--pf-report-border);
    border-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 575.98px) {
  .pf-report-hero .btn,
  .pf-report-download-action {
    width: 100%;
  }
}

.pf-report-snapshot {
  font-variant-numeric: tabular-nums;
}

[data-bs-theme="light"] .pf-report-kpi,
[data-bs-theme="light"] .pf-report-section {
  box-shadow: 0 0.45rem 1.2rem rgb(31 65 83 / 10%);
}

[data-bs-theme="dark"] .pf-report-hero {
  box-shadow: 0 0.75rem 1.8rem rgb(0 0 0 / 24%);
}

/* ---- Organizer operations ---------------------------------------------- */

.pf-operations {
  --pf-ops-border: color-mix(
    in srgb,
    var(--pf-accent-highlight) 18%,
    var(--bs-border-color)
  );
}

.pf-ops-hero {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--pf-ops-border);
  border-radius: 1rem;
  background:
    radial-gradient(
      circle at 92% 10%,
      color-mix(in srgb, var(--pf-accent) 18%, transparent) 0,
      transparent 28%
    ),
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--pf-accent) 7%, var(--pf-ops-surface)),
      var(--pf-ops-surface) 65%
    );
  box-shadow: 0 0.65rem 1.8rem rgb(15 23 42 / 6%);
}

.pf-ops-hero::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.3rem;
  background: var(--pf-accent-highlight);
  content: "";
}

.pf-ops-kicker {
  color: color-mix(
    in srgb,
    var(--pf-accent-highlight) 78%,
    var(--pf-ops-accent-mix)
  );
  letter-spacing: 0.09em;
}

.pf-ops-grid,
.pf-ops-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

.pf-ops-metric {
  position: relative;
  overflow: hidden;
  border-color: var(--pf-ops-border);
  box-shadow: 0 0.4rem 1rem rgb(15 23 42 / 4%);
}

.pf-ops-metric::after {
  position: absolute;
  inset: auto 0 0;
  height: 0.2rem;
  background: color-mix(in srgb, var(--pf-accent-highlight) 72%, white);
  content: "";
}

.pf-ops-metric-alert::after {
  background: var(--bs-warning);
}

.pf-result-actions {
  display: grid;
  gap: 0.6rem;
  min-width: min(32rem, 80vw);
  max-height: min(32rem, 70vh);
  padding: 0.8rem;
  overflow-y: auto;
  border: 1px solid var(--pf-ops-border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--pf-accent) 3%, var(--pf-ops-surface));
  box-shadow: 0 0.75rem 1.8rem rgb(15 23 42 / 9%);
}

.pf-result-action-item {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.55rem;
  background: var(--pf-ops-surface);
}

.pf-result-action-item > summary {
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  font-weight: 600;
}

.pf-result-action-item > form {
  margin: 0 0.7rem 0.7rem;
}

.pf-operations :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pf-accent-highlight), white 25%);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .pf-operations .display-6 {
    font-size: 2rem;
  }

  .pf-result-actions {
    min-width: 0;
  }
}