:root {
  /* Kelly-green-dominant palette. The old --thunder-navy variable is remapped
     to dark green so all the structural chrome (headers, buttons, badges) that
     referenced it becomes green; red is kept as a secondary accent. */
  --kelly: #2e8b22;        /* primary kelly green */
  --kelly-dark: #1c5715;   /* deep green for headers / structure */
  --kelly-deeper: #14400f; /* darkest green */
  --kelly-light: #eaf5e7;  /* pale green ground */

  --thunder-navy: var(--kelly-dark); /* remapped: structure is now green */
  --thunder-red: #c8102e;            /* secondary accent (kept) */
  --thunder-light: #eaf5e7;          /* page ground -> pale green */
  --thunder-gray: #5a6b58;           /* neutral biased toward green */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  color: var(--thunder-navy);
  /* Foundation default background: kelly green. */
  background: var(--kelly);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: 1.5;
}

/* Content-heavy interior pages read better on the pale-green ground; the
   landing page keeps the full kelly-green foundation. */
body:not(.home) {
  background: var(--thunder-light);
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Header */
.site-header {
  background: var(--thunder-navy);
  color: #fff;
  padding: 1rem 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.brand::before {
  content: "\26A1"; /* high-voltage / thunder bolt */
  color: var(--thunder-red);
  margin-right: 0.4rem;
}

.site-nav a {
  color: #fff;
  text-decoration: none;
  margin-left: 1.25rem;
}

.site-nav a:hover {
  color: var(--thunder-red);
}

/* Hero / main content */
main {
  flex: 1 0 auto;
}

.hero {
  text-align: center;
  padding: 4rem 1.25rem;
}

.hero h1 {
  font-size: 2.25rem;
  margin: 0 0 0.5rem;
}

.tagline {
  font-size: 1.1rem;
  color: var(--thunder-gray);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero a {
  color: var(--thunder-red);
}

/* Footer */
.site-footer {
  background: var(--thunder-navy);
  color: #cdd5e0;
  padding: 1rem 0;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.site-footer .container {
  text-align: center;
}

/* ===========================================================================
   LANDING PAGE (redesign): title bar, ticker, two-panel body.
   Desktop: left nav panel (~35%) + right slideshow panel side by side.
   Mobile:  the two panels stack (left above right), page scrolls.
   =========================================================================== */
.landing {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1 1 auto;
}

/* Title bar */
.landing-title {
  background: var(--kelly-dark);
  color: #fff;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 3px 12px rgba(20, 64, 15, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 2rem);
}

.landing-title-text {
  text-align: center;
}

/* Flanking logos on either side of the title text. */
.landing-logo {
  flex: 0 0 auto;
  width: clamp(52px, 12vw, 96px);
  height: auto;
  display: block;
}

.landing-title h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  font-style: italic;
  font-size: clamp(2rem, 6vw, 3.2rem);
  letter-spacing: 0.5px;
  line-height: 1.05;
}

.landing-subtitle {
  margin: 0.35rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  font-style: italic;
  font-size: clamp(0.95rem, 2.5vw, 1.25rem);
  color: #dff0da;
  letter-spacing: 1px;
}

/* Two-panel body */
.landing-body {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 1.25rem;
  align-items: stretch;
  flex: 1 1 auto;
}

/* --- Left panel: navigation --- */
.landing-left {
  background: #fff;
  border: 1px solid rgba(20, 64, 15, 0.15);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 3px 12px rgba(20, 64, 15, 0.12);
}

.landing-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.landing-nav-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--kelly);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.7rem 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.landing-nav-btn:hover {
  background: var(--kelly-dark);
}

.nav-logout { margin: 0; }
.nav-logout .landing-nav-btn { font: inherit; font-weight: 700; }

.landing-nav-heading {
  display: block;
  font-weight: 800;
  color: var(--kelly-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  padding: 0.3rem 0.25rem;
  border-bottom: 2px solid var(--kelly);
  margin-bottom: 0.4rem;
}

.landing-team-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.landing-team-list a {
  display: block;
  color: var(--kelly-dark);
  text-decoration: none;
  font-weight: 600;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border-left: 3px solid var(--kelly);
  background: var(--kelly-light);
}

.landing-team-list a:hover {
  background: var(--kelly);
  color: #fff;
}

/* --- Right panel: slideshow --- */
.landing-right {
  background: var(--kelly-deeper);
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: 0 3px 12px rgba(20, 64, 15, 0.2);
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.slideshow {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.slideshow-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  padding: 1.5rem 1rem 0.75rem;
  font-size: 0.95rem;
  text-align: center;
}

.slideshow-controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.6rem 0 0.2rem;
}

.slide-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  width: 3rem;
  height: 2.3rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.slide-btn:hover {
  background: var(--kelly);
  border-color: var(--kelly);
}

.slide-pause.is-paused {
  background: var(--thunder-red);
  border-color: var(--thunder-red);
}

/* --- Responsive: stack the panels on mobile (left above right) --- */
@media (max-width: 760px) {
  .landing-body {
    grid-template-columns: 1fr; /* single column -> stacks */
  }
  .landing-right {
    min-height: 260px;
  }
  .slideshow-viewport {
    min-height: 220px;
  }
}

/* Breaking News ticker on the landing page, above the Teams list. */
.news-ticker {
  display: flex;
  align-items: stretch;
  width: min(1000px, 96%);
  margin: 0 auto 0.75rem;
  background: rgba(20, 64, 15, 0.85); /* deep green (news default) */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  overflow: hidden;
}

.news-ticker-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: var(--kelly);   /* news label = kelly green */
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
  white-space: nowrap;
}

/* Urgent variant: red alert treatment so it clearly outranks Breaking News. */
.news-ticker--urgent {
  background: #6b0f1c; /* deep red ground */
  border-color: rgba(255, 120, 130, 0.6);
}
.news-ticker--urgent .news-ticker-label {
  background: var(--thunder-red);
}
.news-ticker--urgent .news-ticker-sep {
  color: #ff97a2;
}

/* Static state (added by ticker.js when content fits): no scroll, centered. */
.news-ticker--static .news-ticker-track {
  animation: none;
  transform: none;
  width: 100%;
  justify-content: center;
}
.news-ticker--static .news-ticker-set--dup {
  display: none; /* hide the duplicate copy when not looping */
}
.news-ticker--static .news-ticker-viewport {
  display: flex;
  justify-content: center;
}

/* Label has a full and short variant; show the right one per screen width. */
.news-ticker-label-short {
  display: none;
}

.news-ticker-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
}

.news-ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.5rem 0;
  /* The track holds two copies of the items; translating by -50% scrolls
     exactly one full set, so the loop is seamless. */
  animation: news-ticker-scroll 40s linear infinite;
  will-change: transform;
}

.news-ticker-set {
  display: inline-flex;
  align-items: center;
}

.news-ticker-item {
  color: #fff;
  font-size: 1rem;
  padding: 0 0.75rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.news-ticker-sep {
  color: var(--thunder-red);
  font-size: 0.8rem;
}

@keyframes news-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause on hover so a reader can stop to read an item. */
.news-ticker:hover .news-ticker-track {
  animation-play-state: paused;
}

/* Mobile-tuned ticker (narrow screens / phones).
   The ticker always animates here regardless of the device's reduced-motion
   setting, per design choice. We compress the chrome and speed the scroll up
   so headlines come around faster on a small screen. */
@media (max-width: 600px) {
  .news-ticker {
    width: 96vw;
    border-radius: 5px;
  }
  .news-ticker-label {
    /* Compact tag so it doesn't crowd the row. */
    font-size: 0.7rem;
    padding: 0.45rem 0.6rem;
    letter-spacing: 0;
  }
  .news-ticker-label-full {
    display: none;
  }
  .news-ticker-label-short {
    display: inline;
  }
  .news-ticker-item {
    font-size: 0.9rem;
    padding: 0 0.6rem;
  }
  .news-ticker-track {
    /* Faster loop on small screens. */
    animation-duration: 22s;
  }
}

/* Teams list overlaid on the landing image, centered both axes. */
.hero-teams {
  text-align: center;
}

.hero-teams-title {
  color: #fff;
  font-size: 2rem;
  margin: 0 0 1rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-teams ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hero-teams a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  background: rgba(11, 31, 58, 0.35);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.hero-teams a:hover {
  background: var(--thunder-red);
  border-color: var(--thunder-red);
}

/* ---------------------------------------------------------------------------
   Team pages
   --------------------------------------------------------------------------- */
.page-title {
  margin: 2rem 0 0.5rem;
  font-size: 2rem;
}

.page-intro {
  color: var(--thunder-gray);
  margin: 0 0 2rem;
}

.breadcrumb {
  margin: 1.5rem 0 0;
}

.breadcrumb a,
.team-meta a {
  color: var(--thunder-red);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* Team list grid */
.team-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.team-card a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #e1e6ee;
  border-left: 5px solid var(--thunder-red);
  border-radius: 8px;
  text-decoration: none;
  color: var(--thunder-navy);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.team-card a:hover {
  box-shadow: 0 6px 18px rgba(11, 31, 58, 0.15);
  transform: translateY(-2px);
}

.team-card-age {
  display: inline-block;
  align-self: flex-start;
  background: var(--thunder-navy);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
}

.team-card-name {
  font-size: 1.15rem;
  font-weight: 700;
}

.team-card-coach {
  color: var(--thunder-gray);
  font-size: 0.9rem;
}

/* Team detail */
.team-meta {
  font-size: 1.05rem;
  color: var(--thunder-gray);
  margin: 0 0 2rem;
}

.badge {
  display: inline-block;
  background: var(--thunder-navy);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin-right: 0.5rem;
}

.team-meta strong {
  color: var(--thunder-navy);
}

.team-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.team-section {
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

.team-section h2 {
  margin-top: 0;
  font-size: 1.2rem;
  color: var(--thunder-navy);
}

.muted {
  color: var(--thunder-gray);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Auth / Manage area: forms, cards, tables, badges, flash messages
   --------------------------------------------------------------------------- */
.container.narrow {
  max-width: 460px;
}

.small {
  font-size: 0.85rem;
}

.card,
.card-form {
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 8px;
}

.card {
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem;
}

.card h2 {
  margin-top: 0;
  font-size: 1.15rem;
  color: var(--thunder-navy);
}

.card-form {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

/* A card-form nested inside a .card shouldn't double the border/padding. */
.card .card-form {
  border: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.card-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--thunder-navy);
  font-size: 0.95rem;
}

.card-form label.inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-weight: 400;
}

.card-form input,
.card-form textarea,
.card-form select {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid #c5cdd9;
  border-radius: 6px;
  background: #fff;
}

.card-form input:focus,
.card-form textarea:focus,
.card-form select:focus {
  outline: 2px solid var(--thunder-red);
  outline-offset: 1px;
  border-color: var(--thunder-red);
}

.card-form textarea {
  resize: vertical;
}

.btn-primary,
.btn-secondary {
  font: inherit;
  font-weight: 700;
  padding: 0.6rem 1.4rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  align-self: flex-start;
}

.btn-primary {
  background: var(--thunder-red);
  color: #fff;
}

.btn-primary:hover {
  background: #a50d26;
}

.btn-secondary {
  background: #e1e6ee;
  color: var(--thunder-navy);
}

.btn-link-danger {
  background: none;
  border: none;
  color: var(--thunder-red);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.form-error {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  color: #a50d26;
  padding: 0.75rem 1rem;
  border-radius: 6px;
}

.flash {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin: 0 0 1.5rem;
}

.flash-success {
  background: #e7f6ec;
  border: 1px solid #b6e0c4;
  color: #1b6b38;
}

.flash-error {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  color: #a50d26;
  word-break: break-word;
}

.manage-head {
  margin: 2rem 0 1.5rem;
}

.manage-head .page-title {
  margin-bottom: 0.25rem;
}

/* Data tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid #eef1f5;
  vertical-align: top;
}

.data-table th {
  color: var(--thunder-gray);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.row-expired td {
  color: var(--thunder-gray);
}

.badge-live {
  background: #1b6b38;
}

.badge-expired,
.badge-pending {
  background: var(--thunder-gray);
}

.logout-form {
  margin: 1rem 0 3rem;
}

/* ---------------------------------------------------------------------------
   Team management: rosters, schedules, photos, assignment UI
   --------------------------------------------------------------------------- */
.manage-pill {
  display: inline-block;
  margin-left: 0.5rem;
  background: #1b6b38;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  vertical-align: middle;
}

/* The team-section cards already have white backgrounds; keep their text dark
   even on a has-bg page. */
.team-section h2 {
  color: var(--thunder-navy);
}

/* Roster */
.roster-list,
.schedule-list,
.assigned-list {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
}

.roster-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #eef1f5;
}

.roster-num {
  display: inline-block;
  min-width: 1.9rem;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: var(--thunder-navy);
  border-radius: 4px;
  font-size: 0.8rem;
  padding: 0.1rem 0.3rem;
}

.roster-name {
  font-weight: 600;
}

.roster-pos {
  color: var(--thunder-gray);
  font-size: 0.85rem;
}

/* Schedule */
.schedule-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eef1f5;
}

/* Past events: subtly distinguished, but NOT dimmed to look disabled. */
.schedule-list li.past .sched-when {
  color: var(--thunder-gray);
}

.sched-what {
  color: var(--thunder-navy);
}

.sched-when {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--thunder-red);
  min-width: 8.5rem;
}

.sched-loc {
  color: #46505e;
  font-size: 0.9rem;
}

.sched-notes {
  font-size: 0.9rem;
  color: #46505e;
  margin-top: 0.15rem;
}

/* Final score badge (W/L/T) */
.final-score {
  display: inline-block;
  margin-left: 0.4rem;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
}

.outcome-W { background: #1b6b38; }   /* win  = green */
.outcome-L { background: var(--thunder-red); } /* loss = red */
.outcome-T { background: var(--thunder-gray); } /* tie  = gray */

/* Inline score editor (coach/admin) */
.score-editor {
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

.score-editor summary {
  cursor: pointer;
  color: var(--thunder-red);
  width: fit-content;
}

.score-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 0.4rem 0 0.3rem;
  flex-wrap: wrap;
}

.score-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  color: var(--thunder-gray);
  gap: 0.15rem;
}

.score-form input {
  width: 4rem;
  font: inherit;
  padding: 0.3rem 0.4rem;
  border: 1px solid #c5cdd9;
  border-radius: 5px;
}

/* Photos */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}

.photo {
  position: relative;
  margin: 0;
}

.photo img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.photo figcaption {
  font-size: 0.8rem;
  color: var(--thunder-gray);
  margin-top: 0.25rem;
}

.photo-del {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 1;
}

/* Inline edit mini-forms inside team-section cards */
.mini-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #d6dde7;
}

.mini-form.stack {
  flex-direction: column;
  align-items: stretch;
}

.mini-form input {
  font: inherit;
  padding: 0.4rem 0.55rem;
  border: 1px solid #c5cdd9;
  border-radius: 5px;
  flex: 1 1 auto;
  min-width: 0;
}

.mini-form input.w-num {
  flex: 0 0 3.5rem;
}

.btn-sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
}

.btn-link-danger.sm {
  font-size: 1rem;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}

/* Inline forms that should sit on one row next to their content */
.roster-list form,
.schedule-list form,
.assigned-list form {
  margin: 0;
  margin-left: auto;
}

/* Admin assign-coach UI */
.assigned-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #eef1f5;
}

.inline-assign {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.inline-assign select {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid #c5cdd9;
  border-radius: 6px;
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   Player bio page
   --------------------------------------------------------------------------- */
.player-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
  flex-wrap: wrap;
}

.player-headshot img,
.headshot-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  object-fit: cover;
  border: 3px solid var(--thunder-navy);
  display: block;
}

.headshot-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--thunder-navy);
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
}

.player-id .page-title {
  margin: 0 0 0.25rem;
}

/* Make a player's roster name look like a link. */
a.roster-name {
  color: var(--thunder-navy);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted #9aa6b5;
}

a.roster-name:hover {
  color: var(--thunder-red);
  border-bottom-color: var(--thunder-red);
}

.prewrap {
  white-space: pre-wrap;
}

.manage-card {
  border-left: 4px solid var(--thunder-red);
}

/* Highlight video grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.video-item {
  margin: 0;
}

.video-item video {
  width: 100%;
  border-radius: 8px;
  background: #000;
  aspect-ratio: 16 / 9;
}

.video-item figcaption {
  font-size: 0.9rem;
  color: var(--thunder-navy);
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.video-item figcaption form {
  margin: 0;
}

/* Contact form recipient checkboxes */
.recipient-set {
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  padding: 0.75rem 1rem 1rem;
  margin: 0;
}

.recipient-set legend {
  font-weight: 700;
  color: var(--thunder-navy);
  font-size: 0.95rem;
  padding: 0 0.4rem;
}

.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  padding: 0.3rem 0;
  flex-direction: row;
}

.check input {
  width: auto;
  margin: 0;
}

.check.fixed {
  color: var(--thunder-gray);
  border-bottom: 1px dashed #d6dde7;
  padding-bottom: 0.5rem;
  margin-bottom: 0.3rem;
}

.check em {
  color: var(--thunder-gray);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
   Per-team background photo
   .team-bg is a fixed, full-viewport layer behind the page content. The dark
   gradient (set inline per team in show.ejs) keeps text legible. On pages that
   have a background, the title/breadcrumb text flips to white; the section
   cards stay on white so their content remains readable.
   --------------------------------------------------------------------------- */
.team-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.has-bg main {
  /* lift content above the fixed background layer */
  position: relative;
  z-index: 1;
}

body.has-bg .page-title,
body.has-bg .team-meta,
body.has-bg .breadcrumb a {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

body.has-bg .team-meta strong {
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Forum
   --------------------------------------------------------------------------- */
.board-list,
.thread-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem;
}

.board-row,
.thread-row {
  border-bottom: 1px solid #e1e6ee;
}

.board-link,
.thread-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 0.5rem;
  text-decoration: none;
  color: var(--thunder-navy);
}

.board-link:hover,
.thread-link:hover {
  background: #f5f7fa;
}

.board-name,
.thread-title {
  font-weight: 700;
  font-size: 1.05rem;
}

.board-meta,
.thread-meta {
  font-size: 0.82rem;
  color: var(--thunder-gray);
}

/* Tags (pinned / locked / OP) */
.tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  color: #fff;
  vertical-align: middle;
  margin-right: 0.3rem;
}

.tag-pin  { background: #1b6b38; }
.tag-lock { background: var(--thunder-gray); }
.tag-op   { background: var(--thunder-navy); }

/* Thread detail */
.thread-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.mod-bar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.mod-bar form {
  margin: 0;
}

.btn-link {
  background: none;
  border: 1px solid #c5cdd9;
  color: var(--thunder-navy);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: 5px;
}

.btn-link:hover {
  border-color: var(--thunder-navy);
}

.post-list {
  margin: 1.25rem 0 2rem;
}

.post {
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.85rem;
}

.post-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  flex-wrap: wrap;
}

.post-author {
  font-weight: 700;
  color: var(--thunder-navy);
}

.post-date {
  color: var(--thunder-gray);
}

.post-body {
  color: var(--thunder-navy);
  line-height: 1.55;
}

.post form {
  margin: 0.6rem 0 0;
}

/* ---------------------------------------------------------------------------
   Slideshow admin (/manage/slideshow)
   --------------------------------------------------------------------------- */
.slide-admin-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.slide-admin-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.75rem;
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  background: #fff;
}

.slide-admin-item img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
  background: #000;
}

.slide-admin-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.slide-caption {
  font-weight: 600;
  color: var(--thunder-navy);
}

.slide-admin-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.slide-admin-actions form { margin: 0; }

.slide-replace-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px dashed #d6dde7;
}

.slide-replace-label {
  font-size: 0.85rem;
  color: var(--thunder-gray);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Announcement list row actions + edit form actions */
.row-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  white-space: nowrap;
}
.row-actions form { margin: 0; }

.edit-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.edit-actions .btn-secondary {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* User edit — account action buttons */
.user-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.user-action-row form { margin: 0; }