:root {
  --navy: #1b2a4a;
  --navy-dark: #121e35;
  --gold: #c8a24a;
  --green: #2e7d4f;
  --red: #b3372c;
  --bg: #f4f5f7;
  --card-bg: #ffffff;
  --text: #1f2430;
  --muted: #6b7280;
  --border: #e2e4e9;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

a { color: var(--navy); }

.site-header {
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1rem;
  position: relative;
}

.site-header__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-right: 3.2rem;
}

.brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

.nav-waffle {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 8px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  z-index: 30;
}

.nav-waffle:hover { background: rgba(255,255,255,0.22); }

/* Mobile-first: nav starts collapsed, opened via the waffle button */
.main-nav {
  display: none;
  width: 100%;
  flex-basis: 100%;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.95rem;
}

.main-nav.main-nav--open { display: flex; }

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.nav-section--account {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.main-nav a {
  color: #f0f0f2;
  text-decoration: none;
}

.main-nav a:hover { text-decoration: underline; }

.nav-user {
  color: #d7dbe6;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.role-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(255,255,255,0.15);
}

.role-badge--site_admin { background: var(--gold); color: var(--navy-dark); }
.role-badge--game_admin { background: #4c6ef5; color: #fff; }
.role-badge--player { background: var(--green); color: #fff; }

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

h1 { font-size: 1.6rem; margin-bottom: 0.25rem; }
.subtitle { color: var(--muted); margin-top: 0; margin-bottom: 1.5rem; }

.page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.card--narrow { max-width: 420px; }
.centered { margin: 2rem auto; text-align: center; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.dashboard-grid .card h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
}

.stat-card__number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
}

.stat-card__label {
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  cursor: pointer;
}

.button--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.stacked-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stacked-form label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.6rem;
}

.stacked-form input,
.stacked-form select,
.stacked-form textarea {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  width: 100%;
  font-family: inherit;
}

.stacked-form textarea { resize: vertical; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500 !important;
}

.checkbox-label input { width: auto !important; }

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400 !important;
  margin-top: 0.4rem !important;
}

.radio-label input[type="radio"] { width: auto !important; }
.radio-label select {
  width: auto !important;
  padding: 0.3rem 0.5rem;
  display: inline-block;
}

.stacked-form button { margin-top: 1.25rem; }

.field-hint { color: var(--muted); font-size: 0.8rem; margin: 0.25rem 0 0; }

.inline-form { display: inline; }

.link-button {
  background: none;
  border: none;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
}

.link-button--danger { color: var(--red); }

.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown summary {
  color: #f0f0f2;
  cursor: pointer;
  list-style: none;
}

.nav-dropdown summary::-webkit-details-marker { display: none; }

.nav-dropdown summary::after {
  content: ' \25BE';
  font-size: 0.7em;
}

.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  min-width: 160px;
  z-index: 20;
  padding: 0.35rem 0;
}

.nav-dropdown__menu a {
  display: block;
  padding: 0.5rem 0.9rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.nav-dropdown__menu a:hover { background: var(--bg); }

/* Inside the mobile waffle panel, let dropdowns open inline (stacked)
   instead of floating off-canvas — there's no room for that there. */
.main-nav--open .nav-dropdown__menu {
  position: static;
  box-shadow: none;
  border: none;
  margin-top: 0.25rem;
  padding-left: 0.75rem;
}

.nav-logout {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.nav-logout:hover { background: rgba(255,255,255,0.22); }

/* Desktop: nav is always visible as a normal row; the waffle button
   (mobile-only) disappears entirely. */
@media (min-width: 861px) {
  .site-header__inner { padding-right: 0; }

  .nav-waffle { display: none; }

  .main-nav {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: auto;
    width: auto;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    font-size: 0.9rem;
  }

  .nav-section {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .nav-section--account {
    margin-left: auto;
    padding-top: 0;
    border-top: none;
  }

  .main-nav .nav-dropdown__menu {
    position: absolute;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    border: 1px solid var(--border);
    padding-left: 0;
  }
}

.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.flash--error { background: #fdecea; color: var(--red); border: 1px solid #f3c6c1; }
.flash--success { background: #e9f6ee; color: var(--green); border: 1px solid #bfe3cc; }

.table-wrap { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.data-table th, .data-table td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.data-table th { background: #f8f9fb; font-size: 0.75rem; text-transform: uppercase; color: var(--muted); }

.table-actions { display: flex; gap: 0.75rem; white-space: nowrap; }

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}

.status-dot--active { background: var(--green); }
.status-dot--inactive { background: var(--red); }

.simple-list { list-style: none; padding: 0; margin: 0; }
.simple-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.simple-list li:last-child { border-bottom: none; }

.data-table input[type="number"] {
  width: 5.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
}

.team-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
}

.team-logo--small { width: 20px; height: 20px; }

.team-logo--large { width: 64px; height: 64px; margin-bottom: 0.75rem; }

.team-logo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
}

.matchup-cell {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.muted { color: var(--muted); font-size: 0.85rem; }
.empty-state { color: var(--muted); }

/* Rendered Markdown content on page-view screens */
.page-content h1, .page-content h2, .page-content h3 { color: var(--navy); margin-top: 1.25em; }
.page-content h1:first-child, .page-content h2:first-child, .page-content h3:first-child { margin-top: 0; }
.page-content p { margin: 0.75em 0; }
.page-content ul, .page-content ol { padding-left: 1.4rem; }
.page-content a { color: var(--navy); text-decoration: underline; }
.page-content code {
  background: #f0f1f4;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
}
.page-content blockquote {
  border-left: 3px solid var(--gold);
  margin: 0.75em 0;
  padding: 0.25em 0 0.25em 1em;
  color: var(--muted);
}
.page-content table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.page-content th, .page-content td { border: 1px solid var(--border); padding: 0.5em 0.7em; text-align: left; }

/* Mobile: stack the data table into label/value rows */
@media (max-width: 640px) {
  .data-table thead { display: none; }
  .data-table tr {
    display: block;
    border-bottom: 8px solid var(--bg);
  }
  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
  }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    margin-right: 1rem;
  }

  /* Picks page matchup cell: the abbreviated "SF @ LAR" + logo row is
     redundant with the full names right below it once everything's
     stacked into narrow cards, so hide it and break the full names
     across two lines instead of one long run-on line. */
  .matchup-abbrev { display: none; }
  .matchup-fullnames__home {
    display: block;
    margin-top: 0.1rem;
  }
}