/* NOBO Pickleball visual identity. Loaded after style.css, leaving app logic untouched. */
:root {
  --navy: #071b34;
  --navy2: #10365e;
  --ink: #142c47;
  --soft: #61788f;
  --muted: #6e8397;
  --line: #dee7f0;
  --card: #ffffff;
  --page: #f3f7fb;
  --lime: #ffcf38;
  --green: #186caa;
}
body { background: var(--page); }
.sidebar {
  background: linear-gradient(167deg, #05182e 0%, #0b2c51 56%, #071a33 100%);
  border-right: 1px solid #14375d;
}
.brand.nobo-brand {
  gap: 10px;
  padding: 0 3px 29px;
  font-size: 21px;
  letter-spacing: -.5px;
  color: #f7fbff;
}
.nobo-brand-logo { width: 66px; height: 66px; object-fit: contain; flex-shrink: 0; }
.nobo-brand-wordmark { display: grid; gap: 0; min-width: 0; }
.nobo-brand-wordmark strong { font-size: 24px; font-style: italic; font-weight: 800; line-height: 1; letter-spacing: -.7px; }
.nobo-brand-wordmark small { color: #f5c83a; letter-spacing: 2px; margin-top: 5px; font-size: 9px; }
.side-caption { color: #91b5d4; font-size: 9px; letter-spacing: 1.7px; }
.nav-item { color: #b9cee2; }
.nav-item:hover, .nav-item.active { background: #16416d; color: #ffffff; }
.nav-item.active { box-shadow: inset 3px 0 0 var(--lime); }
.info-note { color: #b9d2e5; }
.mini-dot, .online-tag span { background: #f8c935; }
.account-chip { border-top-color: #315477; }
.account-chip small, .logout, .small-link { color: #adc6db; }
.avatar, .top-avatar { background: #e2effc; color: #17456f; }
.topbar { border-bottom-color: #dee8f1; }
.top-auth, .online-tag { color: #165c92; }
.nobo-mobile-brand { display: inline-flex; align-items: center; gap: 8px; color: #14365a!important; font: 750 15px 'Space Grotesk', sans-serif; }
.nobo-mobile-brand img { width: 37px; height: 37px; object-fit: contain; }
.nobo-mobile-brand strong { font-weight: 500; }
.footer { color: #668099; }
.eyebrow { color: #1269a5; }
.surface, .stat-card, .auth-card { border-color: var(--line); box-shadow: 0 2px 16px rgba(8,33,65,.025); }
.stat-card:hover { border-color: #a9c8de; }
.stat-head, .date-label { color: #69819b; }
.stat-head span { color: #3482c4; }
.stat-note, .page-title p, .muted, .empty { color: #687f95; }
.text-link, .form-foot a { color: #155f99; }
.text-link:hover, .form-foot a:hover { color: #0b3867; }
.position.first { color: #b28110; }
.positive { color: #238351!important; }
.btn-primary { background: var(--lime); border-color: var(--lime); color: #122c49; }
.btn-primary:hover { background: #ffda65; border-color: #ffda65; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #f6bc26; outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: #3186d3; }
.match-hero { background: #0c2849; border-color: #0c2849; }
.team-label { color: #b4d6f1; }
.admin-k-breakdown { border-top-color: #355779; }
.admin-k-player { background: #173a60; border-color: #355b82; }
.admin-k-players strong, .admin-k-player-title strong, .admin-k-bonus, .admin-k-neutral { color: #ffd45a; }
.pagination-links .pagination-current { background: var(--navy); border-color: var(--navy); }
.pagination-links a:hover { border-color: #8fb9dd; background: #e8f3ff; }
.leaderboard-toggle input:checked { background: #146aaa; border-color: #146aaa; }

/* Homepage identity: NOBO community brand alongside working match actions. */
.hero.nobo-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 365px;
  padding: 33px 38px 33px 44px;
  background: radial-gradient(ellipse at 75% 45%, #123d76 0%, #071c3a 42%, #061629 85%);
  border: 1px solid #183b67;
  box-shadow: inset 0 0 65px rgba(4,19,43,.28);
  isolation: isolate;
  gap: 22px;
}
.nobo-hero-copy { position: relative; z-index: 1; flex: 1 1 58%; min-width: 0; }
.hero.nobo-hero .eyebrow { color: #ffd351; letter-spacing: 1.85px; }
.hero.nobo-hero h1 { font-size: clamp(35px, 3.7vw, 58px); line-height: 1.05; letter-spacing: -1.9px; }
.hero.nobo-hero h1 span { color: #ffcf38; }
.hero.nobo-hero p { color: #c3d5e9; font-size: 13px; max-width: 465px; }
.hero.nobo-hero .btn-ghost { border-color: #6c90b6; color: #edf5ff; }
.hero.nobo-hero .btn-ghost:hover { background: rgba(255,255,255,.09); }
.nobo-hero-art {
  flex: 0 1 37%;
  width: 37%;
  max-width: 365px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nobo-hero-art img {
  display: block;
  width: 100%;
  max-height: 333px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 21px rgba(0, 7, 25, .42));
}

/* Responsive header, sidebar, and hero image. */
@media (max-width: 1170px) {
  .nobo-brand-logo { width: 52px; height: 52px; }
  .nobo-brand-wordmark strong { font-size: 21px; }
  .nobo-brand-wordmark small { font-size: 8px; }
  .hero.nobo-hero { padding: 32px; }
  .nobo-hero-art { flex-basis: 34%; width: 34%; }
}
@media (max-width: 800px) {
  .hero.nobo-hero { padding: 28px 26px; min-height: 285px; gap: 10px; }
  .nobo-hero-art { display: flex; flex: 0 1 36%; width: 36%; max-width: 250px; }
  .nobo-hero-art img { max-height: 245px; }
  .hero.nobo-hero h1 { font-size: clamp(30px, 5vw, 44px); }
  .mobile-nav { background: #ffffff; border-top: 1px solid var(--line); }
  .mobile-nav a { color: #155a91; }
}
@media (max-width: 540px) {
  .hero.nobo-hero { flex-direction: column; align-items: stretch; padding: 25px 23px 13px; gap: 8px; }
  .hero.nobo-hero h1 { font-size: clamp(36px, 9vw, 45px); margin: 12px 0; }
  .hero.nobo-hero p { font-size: 12px; }
  .hero.nobo-hero .hero-actions { margin-top: 18px; }
  .nobo-hero-art { align-self: center; width: 100%; max-width: 250px; min-height: 0; margin: 2px 0 -6px; }
  .nobo-hero-art img { width: min(100%, 235px); max-height: 235px; }
  .online-tag { font-size: 9px; letter-spacing: .5px; }
  .topbar-right { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .nobo-hero-art img { transition: none; }
}

/* The organization homepage promotes events above the club statistics.
   The event list lives in dashboard.html and the controls activate when >1 event exists. */
.hero.nobo-hero h1 { font-size: clamp(34px, 3.45vw, 55px); }
.nobo-hero-art img { max-width: 270px; max-height: 270px; }
.nobo-event-carousel {
  margin: 20px 0;
  padding: 22px 26px;
  overflow: hidden;
}
.nobo-events-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nobo-events-heading h2 {
  margin: 5px 0 0;
  font: 750 clamp(22px, 2.25vw, 27px)/1.15 'Space Grotesk', sans-serif;
  color: var(--ink);
}
.nobo-carousel-navigation { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.nobo-carousel-counter { color: #657f99; font-size: 11px; font-weight: 800; letter-spacing: 1px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.nobo-carousel-arrow {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 1px solid #b7cee3;
  background: #eef5fb;
  color: #144b7f;
  font: 600 27px/1 'Space Grotesk', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px;
  transition: background .16s, border-color .16s;
}
.nobo-carousel-arrow:not(:disabled):hover { background: #dceafb; border-color: #719dc2; }
.nobo-carousel-arrow:disabled { opacity: .33; cursor: default; }
.nobo-carousel-viewport { outline-offset: 4px; }
.nobo-carousel-viewport:focus-visible { outline: 3px solid #eabd40; border-radius: 10px; }
.nobo-carousel-slide { display: flex; align-items: center; gap: 23px; padding-top: 17px; animation: nobo-slide-enter .22s ease-out both; }
.nobo-carousel-slide[hidden] { display: none!important; }
.nobo-event-image { width: 128px; height: 128px; flex: 0 0 128px; display: block; border-radius: 12px; object-fit: cover; background: #081c36; }
.nobo-event-copy { min-width: 0; }
.nobo-event-copy h3 { margin: 0 0 9px; font: 750 clamp(18px, 2vw, 24px)/1.2 'Space Grotesk', sans-serif; letter-spacing: -.5px; }
.nobo-event-copy p { max-width: 660px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
@keyframes nobo-slide-enter { from { opacity: .35; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

/* Eric Approved is a club seal, not an event or replacement for the NOBO logo. */
.nobo-sidebar-seal { display: flex; justify-content: center; padding: 8px 0 5px; margin-top: auto; }
.nobo-sidebar-seal img { display: block; width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .18)); }
.nobo-sidebar-seal + .side-bottom { margin-top: 0; }
.nobo-site-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.nobo-footer-seal { display: block; width: 128px; height: 128px; flex: 0 0 auto; object-fit: contain; }
@media (min-width: 801px) and (max-height: 780px) {
  .nobo-sidebar-seal { display: none; }
  .nobo-sidebar-seal + .side-bottom { margin-top: auto; }
}
@media (max-width: 540px) {
  .nobo-event-carousel { padding: 17px; margin: 14px 0; }
  .nobo-carousel-slide { gap: 14px; padding-top: 15px; align-items: center; }
  .nobo-event-image { width: 94px; height: 94px; flex-basis: 94px; }
  .nobo-event-copy h3 { font-size: 17px; }
  .nobo-event-copy p { font-size: 11px; line-height: 1.5; }
  .nobo-carousel-counter { margin-right: 2px; }
  .nobo-carousel-arrow { width: 32px; height: 32px; font-size: 24px; }
  .nobo-site-footer { flex-wrap: wrap; }
  .nobo-footer-seal { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .nobo-carousel-slide { animation: none; }
  .nobo-carousel-arrow { transition: none; }
}