/* =========================================================================
   hugosimoes.com/vb/ — DC Lincoln Beach Volleyball Game Scheduler
   Stylesheet

   Deliberately its OWN visual identity, separate from the main
   hugosimoes.com site's dark cyan/magenta neon theme — warm, bright,
   "beach volleyball" inspired: ocean blue, coral, sand/gold, cream.

   Design brief this file is answering (Hugo's own words):
     "Nice large type and super easy to use for anyone logging in for
     the first time. Describe every option in front of the person so
     everything is clear." + "a cool and modern page, beach volleyball
     design inspired."

   So: big type throughout, big touch-friendly tap targets (buttons,
   toggles, selects all sized for a thumb on a phone at the beach),
   generous spacing, plain-language helper text styling, and a playful
   but clean look matching the vb-logo.svg palette.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&display=swap');

:root{
  /* ---- palette (matches vb-logo.svg) ---- */
  --ocean:        #2aa9c9;
  --ocean-deep:   #1c85a0;
  --ocean-pale:   #e3f4f8;
  --coral:        #ff7a59;
  --coral-deep:   #e85f3f;
  --coral-pale:   #ffe9e1;
  --gold:         #ffc857;
  --gold-deep:    #e7a92e;
  --gold-pale:    #fff3d6;
  --cream:        #fffaf0;
  --sand-bg:      #fbf3e2;
  --sand-card:    #ffffff;
  --sand-border:  #f0e2c4;
  --sand-border-soft: #f5e9cd;

  --ink:          #2a2118;
  --ink-soft:     #6b5d49;
  --ink-faint:    #b6a37c;

  --good:         #2f9e6b;
  --good-pale:    #e3f6ec;
  --bad:          #e0503a;
  --bad-pale:     #fdeae6;

  --radius-sm:    10px;
  --radius:       16px;
  --radius-lg:    24px;
  --radius-pill:  999px;

  --shadow-sm:    0 2px 8px rgba(122, 90, 46, .08);
  --shadow:       0 10px 30px rgba(122, 90, 46, .12);
  --shadow-lg:    0 20px 50px rgba(122, 90, 46, .18);

  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Baloo 2', var(--font-body);
}

/* ---------------------------------------------------------------------
   Reset + base — big base font size on purpose (18px vs. a typical
   16px), so every page starts "large type" without extra work.
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
/* No page on /vb/ should ever need to scroll sideways — this is a
   backstop behind the responsive-table fixes below, in case anything
   else ever runs a hair wider than the viewport on a phone. */
html, body{ overflow-x: hidden; }
body{
  margin: 0;
  min-height: 100vh;
  background: var(--sand-bg);
  background-image:
    radial-gradient(circle at 10% 0%, var(--ocean-pale) 0%, transparent 45%),
    radial-gradient(circle at 90% 100%, var(--gold-pale) 0%, transparent 45%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1{ font-size: clamp(2rem, 4vw + 1rem, 3rem); font-weight: 800; }
h2{ font-size: clamp(1.5rem, 2vw + 1rem, 2rem); }
h3{ font-size: 1.35rem; }
p{ margin: 0 0 1em; }
a{ color: var(--ocean-deep); text-decoration: underline; text-decoration-color: var(--ocean); text-underline-offset: 3px; }
a:hover{ color: var(--coral-deep); text-decoration-color: var(--coral); }
strong{ font-weight: 800; }
small, .vb-small{ font-size: .85rem; }
img{ max-width: 100%; display: block; }
button{ font-family: inherit; }

.vb-container{
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}
.vb-container--wide{ max-width: 1040px; }

/* ---------------------------------------------------------------------
   Header — logo + wordmark, consistent across every /vb/ page
   --------------------------------------------------------------------- */
.vb-header{
  padding: 28px 0 8px;
}
.vb-header-inner{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.vb-logo-mark{ width: 56px; height: 56px; flex: none; }
.vb-brand{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vb-brand-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--ink);
  text-decoration: none;
}
.vb-brand-sub{
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ocean-deep);
}
.vb-header-actions{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   Buttons — large, rounded, thumb-friendly. Filled = primary action
   per context (ocean = neutral/navigate, coral = the "big" call to
   action like sending invites/tally, gold = manager-only actions).
   --------------------------------------------------------------------- */
.vb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  box-shadow: var(--shadow-sm);
}
.vb-btn:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.vb-btn:active{ transform: translateY(0); }
.vb-btn:focus-visible{ outline: 3px solid var(--ocean-deep); outline-offset: 3px; }
.vb-btn--block{ width: 100%; }
.vb-btn--sm{ min-height: 44px; padding: 10px 20px; font-size: .95rem; }

.vb-btn--ocean{ background: var(--ocean); color: #fff; }
.vb-btn--coral{ background: var(--coral); color: #fff; }
.vb-btn--gold{ background: var(--gold); color: #4a3410; }
.vb-btn--good{ background: var(--good); color: #fff; }
.vb-btn--outline{
  background: #fff;
  color: var(--ocean-deep);
  border: 2px solid var(--sand-border);
  box-shadow: none;
}
.vb-btn--outline:hover{ border-color: var(--ocean); }
.vb-btn--ghost{
  background: transparent;
  color: var(--ink-soft);
  box-shadow: none;
  min-height: 44px;
}
.vb-btn--danger{ background: var(--bad); color: #fff; }
.vb-btn[disabled]{ opacity: .5; cursor: not-allowed; transform: none; filter: none; }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.vb-card{
  background: var(--sand-card);
  border: 1px solid var(--sand-border-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.vb-card--pad-sm{ padding: 20px; }
.vb-card-accent{
  height: 6px;
  margin: -28px -28px 24px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--ocean) 0 34%, var(--gold) 34% 67%, var(--coral) 67% 100%);
}

/* ---------------------------------------------------------------------
   Forms — big labels, big inputs, plain-language help text under
   every field ("Describe every option in front of the person").
   --------------------------------------------------------------------- */
.vb-field{ margin-bottom: 22px; }
.vb-label{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 6px;
  color: var(--ink);
}
.vb-help{
  font-size: .9rem;
  color: var(--ink-soft);
  margin: 4px 0 10px;
}
.vb-input, .vb-select, textarea.vb-input{
  width: 100%;
  min-height: 56px;
  padding: 12px 18px;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--sand-border);
  border-radius: var(--radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.vb-input:focus, .vb-select:focus, textarea.vb-input:focus{
  outline: none;
  border-color: var(--ocean);
  box-shadow: 0 0 0 4px var(--ocean-pale);
}
textarea.vb-input{ min-height: 110px; resize: vertical; }
.vb-select{
  cursor: pointer;
  /* Browsers (Safari especially) apply their own native chrome to
     <select> and only partly honor the border/padding above, which is
     what made a select sit flush/underlined next to a fully-boxed
     <input> in the same row (e.g. the Activity Report's Role filter
     next to its From/To date fields). Turning off native appearance
     and drawing our own arrow makes every .vb-select match .vb-input
     pixel-for-pixel in every browser. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5d49' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}

.vb-checkbox-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
}
.vb-checkbox-row input[type="checkbox"]{
  width: 26px;
  height: 26px;
  accent-color: var(--ocean);
  cursor: pointer;
  flex: none;
}
.vb-checkbox-row label{ font-weight: 600; cursor: pointer; }

/* Name-on-top, email-below stacked label, used inside .vb-member-grid. */
.vb-member-name{ display: block; }
.vb-member-email{ display: block; font-weight: 400; font-size: 14px; margin-top: 2px; }

/* Search box next to a list heading (All Players, Who to invite):
   live-filters the list below by name or email. */
.vb-search-head{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vb-search{
  min-height: 40px; width: 220px; max-width: 100%;
  padding: 8px 14px 8px 36px;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5d49' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") no-repeat 12px center / 16px;
  border: 2px solid var(--sand-border); border-radius: var(--radius-pill);
}
.vb-search:focus{ outline: none; border-color: var(--ocean); box-shadow: 0 0 0 4px var(--ocean-pale); }
.vb-search-head + .vb-scroll-list{ margin-top: 12px; }
/* "Who to invite" list: about 4 rows tall, then scrolls. */
.vb-member-scroll{ max-height: 324px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--sand-border-soft); border-radius: var(--radius-sm); padding: 0 10px; }

/* "Who to invite" member checklist — 3 columns, filling as many rows
   as there are members, stepping down to fewer columns on narrower
   screens. */
.vb-member-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
}
@media (max-width: 900px){
  .vb-member-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .vb-member-grid{ grid-template-columns: 1fr; }
}

/* Big pill toggle used for "I'm available" / "Not available" — this is
   the primary control on the member response page, so it's oversized
   and unmistakable at a glance. */
.vb-avail-toggle{
  display: inline-flex;
  border-radius: var(--radius-pill);
  background: var(--sand-bg);
  border: 2px solid var(--sand-border);
  padding: 4px;
  gap: 4px;
}
.vb-avail-toggle input{ position: absolute; opacity: 0; width: 0; height: 0; }
.vb-avail-toggle label{
  min-width: 130px;
  text-align: center;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.vb-avail-toggle input:checked + label{ background: var(--good); color: #fff; }
.vb-avail-toggle input.vb-no:checked + label{ background: var(--bad); color: #fff; }

/* ---------------------------------------------------------------------
   Badges / status chips
   --------------------------------------------------------------------- */
.vb-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.vb-badge--manager{ background: var(--gold-pale); color: var(--gold-deep); }
.vb-badge--stacked{
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 14px;
}
.vb-badge--stacked .vb-badge-role{
  font-size: .62rem;
  font-weight: 700;
  color: #000;
  letter-spacing: .02em;
}
.vb-badge--open{ background: var(--ocean-pale); color: var(--ocean-deep); }
.vb-badge--tallied{ background: var(--good-pale); color: var(--good); }
.vb-badge--locked{ background: var(--good-pale); color: var(--good); }
.vb-badge--edit{ background: var(--coral-pale); color: var(--coral-deep); }
.vb-badge--test{ background: #efeae0; color: var(--ink-soft); border: 1px dashed var(--ink-faint); } /* TEST-USER role */

/* ---------------------------------------------------------------------
   Alerts / notices
   --------------------------------------------------------------------- */
.vb-alert{
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-weight: 600;
  border: 1px solid transparent;
}
.vb-alert--good{ background: var(--good-pale); color: #1d6b48; border-color: #c7e9d7; }
.vb-alert--bad{ background: var(--bad-pale); color: #a1341f; border-color: #f4c9bc; }
.vb-alert--info{ background: var(--ocean-pale); color: var(--ocean-deep); border-color: #cdeaf1; }

/* ---------------------------------------------------------------------
   Date cards — one per Game Query date, on both the response page
   and the tally view.
   --------------------------------------------------------------------- */
.vb-date-card{
  border: 2px solid var(--sand-border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
  background: #fffdf8;
}
.vb-date-card.is-available{ border-color: var(--good); background: var(--good-pale); }
.vb-date-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 14px;
}
.vb-time-row{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.vb-time-row .vb-select{ width: auto; min-width: 140px; }
.vb-time-row span{ color: var(--ink-soft); font-weight: 700; }

.vb-hour-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.vb-hour-box{
  display: inline-block;
  margin: 0;
  padding: 11px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--sand-border);
  background: var(--sand-bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.vb-hour-box.is-selected{ background: var(--good); border-color: var(--good); color: #fff; }

/* I'M AVAILABLE / NOT AVAILABLE toggle, sitting above the hour chips
   (on top of 7 AM) on the player's page. Compact version of
   .vb-avail-toggle to match the chips' scale. */
.vb-avail-toggle--sm{ padding: 3px; gap: 3px; align-self: center; }
.vb-avail-toggle--sm label{ min-width: 0; padding: 8px 14px; font-size: .82rem; white-space: nowrap; }
.vb-avail-toggle input:focus-visible + label{ outline: 2px solid var(--ocean); outline-offset: 2px; }
/* NOT AVAILABLE picked: hours greyed out and not tappable, card goes red. */
.vb-hour-grid.is-off .vb-hour-box{ opacity: .35; pointer-events: none; }
.vb-date-card.is-unavailable{ border-color: var(--bad); background: var(--bad-pale); }
/* Save pressed while a date is still I'M AVAILABLE with no start/end. */
.vb-date-missing{ display: none; margin: 10px 0 0; font-size: .9rem; font-weight: 700; color: #8a6416; }
.vb-date-card.is-missing{ border-color: var(--gold-deep); box-shadow: 0 0 0 4px var(--gold-pale); }
.vb-date-card.is-missing .vb-date-missing{ display: block; }
.vb-hour-box:focus-visible{ outline: 2px solid var(--ocean); outline-offset: 2px; }
@media (max-width: 560px){
  .vb-hour-box{ padding: 10px 12px; font-size: .8rem; }
}

/* ---------------------------------------------------------------------
   Members table
   --------------------------------------------------------------------- */
.vb-table{ width: 100%; border-collapse: collapse; }
.vb-table th, .vb-table td{
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--sand-border-soft);
  font-size: 1rem;
}
.vb-table th{
  font-family: var(--font-display);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
}
.vb-table tr:last-child td{ border-bottom: none; }

/* ---------------------------------------------------------------------
   Tally summary — two dates side by side (Saturday left, Sunday
   right, and so on), each date's name/time rows matching the same
   layout as the Tally email: names flush-right, a fixed gap, times
   flush-left, the whole pair centered in the card.
   --------------------------------------------------------------------- */
/* Open Game Query cards on the Dashboard — side by side on anything
   wider than a phone instead of stacking full-width and leaving most
   of the row empty, since a single card rarely needs the whole
   .vb-container--wide's width. Drops to one column on narrower
   screens, same breakpoint as the tally dates grid below. */
.vb-open-queries-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.vb-open-queries-grid .vb-card{ margin-bottom: 0; }
@media (max-width: 780px){
  .vb-open-queries-grid{ grid-template-columns: 1fr; }
}

.vb-tally-dates-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
  /* Full width of the page (same as the "X of Y have answered" card
     below it), so each date card has room for NOT AVAILABLE and
     AVAILABLE side by side. */
  /* The date cards inside this grid have their own margin-bottom
     zeroed out (the grid's "gap" handles spacing between them
     instead), which left nothing pushing the grid away from whatever
     card comes right after it — e.g. the "X of Y have answered" card
     sat flush against the last date card. A bit of bottom margin here
     matches the 20px rhythm used everywhere else on the page. */
  margin: 0 auto 20px;
}
.vb-tally-dates-grid .vb-tally-block{ margin-bottom: 0; }
/* A single-date Game Query has only one card to show — left in the
   2-column grid it sits pinned to the left half with an empty gap
   beside it. This modifier drops it to one narrower column so the
   grid's own margin:0 auto centers that one card in the page. */
.vb-tally-dates-grid--single{
  grid-template-columns: 1fr;
  max-width: 560px; /* wide enough for the side-by-side lists */
}
@media (max-width: 780px){
  .vb-tally-dates-grid{ grid-template-columns: 1fr; }
}
.vb-tally-block{ margin-bottom: 26px; }
.vb-tally-block h3{ text-align: center; }
.vb-tally-name{
  display: flex;
  justify-content: center;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--sand-border);
  font-size: .88rem;
}
.vb-tally-name:last-child{ border-bottom: none; }
.vb-tally-who{
  flex: 0 0 auto;
  min-width: 120px;
  text-align: right;
  padding-right: 20px;
}
.vb-tally-when{
  flex: 0 0 auto;
  min-width: 130px;
  text-align: left;
}
@media (max-width: 480px){
  .vb-tally-who{ min-width: 90px; padding-right: 12px; }
  .vb-tally-when{ min-width: 100px; }
}

/* Per-date quick summary (top 3 earliest start times, how many
   people are covered at each, and who) — the main at-a-glance visual
   for the card, so it's styled to read as MORE prominent than the
   plain name/time list below it. Each time gets its own chip: a big
   bold time, a muted person count, and the names covering it in
   small italic text underneath. Wraps naturally on narrow screens. */
.vb-tally-summary{
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #f7f0dd;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px 26px;
}
.vb-tally-summary-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
}
.vb-tally-summary-time{ color: var(--ocean); font-weight: 800; font-size: 1.2rem; }
.vb-tally-summary-count{ color: var(--ink-soft); font-size: .88rem; }
.vb-tally-summary-names{
  color: var(--ink-soft);
  font-size: .78rem;
  font-style: italic;
  margin-top: 3px;
  text-align: center;
  line-height: 1.4;
}
/* Per-date head count (available vs. not available) at the top of
   each Tally date card, and the "Not available" list at the bottom —
   same content as the Quick / Final Tally emails. */
.vb-tally-counts{ text-align: center; margin: 0 0 12px; font-weight: 800; font-size: .95rem; white-space: nowrap; }
.vb-tally-counts-yes{ color: var(--good); }
.vb-tally-counts-no{ color: var(--bad); }
.vb-tally-counts-sep{ color: var(--ink-faint); margin: 0 8px; }
.vb-tally-counts-wait{ color: #8a6416; }
/* Dashboard open Game Query cards: one line per date with the same
   head count, left-aligned and a touch smaller. */
.vb-tally-counts--inline{ display: inline; margin: 0; text-align: left; font-size: .85rem; }
.vb-tally-counts--inline .vb-tally-counts-sep{ margin: 0 5px; }
.vb-tally-counts--inline{ white-space: nowrap; }

/* Keep the "X available · Y not available · Z no response" line on ONE
   line on every screen: the text shrinks to fit the card it sits in
   (container query units), from its normal size down to 10px on the
   narrowest phones. Older browsers without container queries get a
   smaller fixed size on phones instead. */
@media (max-width: 560px){
  .vb-tally-counts{ font-size: .78rem; }
  .vb-tally-counts--inline{ font-size: .74rem; }
  .vb-tally-counts-sep, .vb-tally-counts--inline .vb-tally-counts-sep{ margin: 0 5px; }
}
.vb-tally-block, .vb-open-queries-grid .vb-card{ container-type: inline-size; }
@supports (container-type: inline-size){
  .vb-tally-counts{ font-size: clamp(10px, calc((100cqw - 26px) / 21.5), .95rem); }
  .vb-tally-counts--inline{ font-size: clamp(10px, calc((100cqw - 26px) / 21.5), .85rem); }
  .vb-tally-counts-sep{ margin: 0 6px; }
}
.vb-oq-dates{ margin-top: 4px; }
.vb-oq-date{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 3px 0; }
.vb-oq-date-name{ font-weight: 800; color: var(--ink); min-width: 4.5em; }
.vb-tally-out{ margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--sand-border); text-align: center; }
.vb-tally-name + .vb-tally-out{ border-top: none; margin-top: 4px; } /* last name row's own dashed line is the divider */
.vb-tally-out-title{ margin: 0 0 4px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bad); }
.vb-tally-out-names{ margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.6; }
.vb-tally-in-title{ color: var(--good); text-align: center; }
/* NOT AVAILABLE (left) and AVAILABLE (right) side by side under the
   time chips; one list alone runs full width. Available people show
   names right / times left in 3 aligned columns (.vb-tally-people). */
.vb-tally-lists{ display: grid; grid-template-columns: 2fr 3fr; /* Available side gets more room for "Name  time" */ margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--sand-border); }
.vb-tally-lists--single{ grid-template-columns: 1fr; }
.vb-tally-col{ text-align: center; padding: 0 6px; min-width: 0; }
.vb-tally-col + .vb-tally-col{ border-left: 1px dashed var(--sand-border); }
.vb-tally-empty{ color: var(--ink-faint); font-style: italic; } /* "None" / "Nobody yet" in an empty list */
/* Available list as 3 columns: name flush right | fixed gap | time
   flush left, so all names end and all times start on one line. */
.vb-tally-people{ display: grid; grid-template-columns: 1fr 12px 1fr; row-gap: 6px; align-items: baseline; }
.vb-tally-person-name{ text-align: right; font-size: .9rem; color: var(--ink); overflow-wrap: anywhere; }
.vb-tally-person-time{ text-align: left; font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.vb-tally-out--wait .vb-tally-out-title{ color: #8a6416; } /* "No response yet" — gold, not red */
.vb-tally-out + .vb-tally-out{ margin-top: 10px; }

.vb-tally-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--ocean);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
}

/* "Back to dashboard" link that follows the main action button on a
   few pages (Tally, New Game Query) — given its own breathing room so
   it doesn't sit right up against the button above it, centered, and
   bold since it's the one bit of secondary navigation on the page. */
.vb-back-link{
  margin-top: 28px;
  text-align: center;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.vb-footer{
  text-align: center;
  padding: 40px 0 60px;
  color: var(--ink-faint);
  font-size: .85rem;
}
.vb-footer a{ color: var(--ink-faint); }

/* ---------------------------------------------------------------------
   Utility
   --------------------------------------------------------------------- */
.vb-center{ text-align: center; }
.vb-stack{ display: flex; flex-direction: column; gap: 12px; }
.vb-row{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.vb-row--between{ justify-content: space-between; }
.vb-muted{ color: var(--ink-soft); }
.vb-mt-0{ margin-top: 0; }
.vb-mb-0{ margin-bottom: 0; }

/* Two side-by-side panels (e.g. "Add a member" + "All members") that
   stack to one column on narrower screens. Even width by default;
   .vb-col-narrow / .vb-col-wide give one panel a 30%/70% split instead
   (used on the Members page — the form is narrower so the list gets
   the extra room). */
.vb-cols-2{ display: flex; gap: 20px; align-items: flex-start; }
.vb-cols-2 > *{ flex: 1 1 0; min-width: 0; }
.vb-cols-2 > .vb-col-narrow{ flex: 3 1 0; }
.vb-cols-2 > .vb-col-wide{ flex: 7 1 0; }

/* A card whose content scrolls internally instead of growing the page
   — used for the members list so it stays roughly the height of the
   form next to it no matter how many members there are. The header
   row stays put (position: sticky) while the body scrolls under it. */
.vb-scroll-list{ max-height: 560px; overflow-y: auto; }
.vb-scroll-list thead th{
  position: sticky;
  top: 0;
  background: var(--sand-card);
  z-index: 1;
}

/* Brief "toast" confirmation (e.g. "New member added!") that appears
   fixed near the top of the viewport and fades itself out. */
.vb-toast{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  box-shadow: var(--shadow-lg);
  transition: opacity .4s ease, transform .4s ease;
}
.vb-toast--hide{
  opacity: 0;
  transform: translateX(-50%) translateY(-12px);
}

@media (max-width: 780px){
  /* align-items: flex-start above (needed on desktop so the two
     side-by-side columns don't stretch to match each other's height)
     becomes a HORIZONTAL sizing rule once flex-direction flips to
     column here — without overriding it, every stacked box shrinks to
     fit its own content instead of filling the row, which is exactly
     why the "Recent Game Queries"/"All Members" card was sitting
     narrower than the form above it. */
  .vb-cols-2{ flex-direction: column; align-items: stretch; }
  .vb-cols-2 > *{ flex: 1 1 auto; width: 100%; } /* stacked: full width, natural height — ignore the side-by-side width ratio */
  .vb-scroll-list{ max-height: 420px; }
}

@media (max-width: 560px){
  body{ font-size: 17px; }
  .vb-card{ padding: 22px; }
  .vb-card-accent{ margin: -22px -22px 20px; }
  .vb-btn{ width: 100%; }
  .vb-header-actions .vb-btn{ width: auto; }
}

/* ---------------------------------------------------------------------
   Responsive "card row" tables — Recent Game Queries (on both the
   Dashboard and the New Game Query page) and All Members. On a phone
   each <tr> becomes its own compact card — the most important field
   plus a status/role badge on one line, the secondary details on the
   next, actions on a third — instead of a table row that has to
   squeeze 4-5 columns into ~330px and pushes its last column (and the
   whole page) off-screen.

   The Activity Report's table is deliberately NOT part of this: it
   stays a real table showing the raw data as columns, with its own
   already-contained horizontal scroll (.rpt-table-wrap) rather than
   being reshaped — that one's meant to be read and exported as an
   actual grid, row by row.
   --------------------------------------------------------------------- */
@media (max-width: 680px){
  .vb-rq-table thead, .vb-cq-table thead, .vb-mem-table thead{ display: none; }
  .vb-rq-table, .vb-rq-table tbody,
  .vb-cq-table, .vb-cq-table tbody,
  .vb-mem-table, .vb-mem-table tbody{ display: block; width: 100%; }

  /* No boxed "card within a card" — each row just flows the full
     width of whatever card/container it's already inside (matching
     every other edge on the page, like the input fields and buttons
     above it), separated from the next row by a plain divider line. */
  .vb-rq-table tr, .vb-cq-table tr, .vb-mem-table tr{
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 4px;
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid var(--sand-border-soft);
  }
  .vb-rq-table tr:first-child, .vb-cq-table tr:first-child, .vb-mem-table tr:first-child{ padding-top: 2px; }
  .vb-rq-table tr:last-child, .vb-cq-table tr:last-child, .vb-mem-table tr:last-child{ border-bottom: none; padding-bottom: 2px; }
  .vb-rq-table td, .vb-cq-table td, .vb-mem-table td{ display: block; padding: 0; border: none; min-width: 0; }

  /* Empty-state / db-error rows are a single colspan cell — just let
     it fill the card, centered, rather than trying to grid-place it. */
  .vb-rq-table td[colspan], .vb-cq-table td[colspan], .vb-mem-table td[colspan]{
    grid-column: 1 / -1; text-align: center;
  }

  /* Recent Game Queries — Dashboard (Title, Status, Created, Actions) */
  .vb-rq-table td:nth-child(1){ grid-row: 1; grid-column: 1; font-weight: 700; }
  .vb-rq-table td:nth-child(2){ grid-row: 1; grid-column: 2; justify-self: end; }
  .vb-rq-table td:nth-child(3){ grid-row: 2; grid-column: 1 / -1; font-size: .85rem; }
  .vb-rq-table td:nth-child(4){ grid-row: 3; grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 6px; }
  .vb-rq-table td:nth-child(4) .vb-btn{ width: auto; }

  /* Recent Game Queries — New Game Query page (Title, Status, Dates, Created, Actions) */
  .vb-cq-table td:nth-child(1){ grid-row: 1; grid-column: 1; font-weight: 700; }
  .vb-cq-table td:nth-child(2){ grid-row: 1; grid-column: 2; justify-self: end; }
  .vb-cq-table td:nth-child(3){ grid-row: 2; grid-column: 1; font-size: .85rem; color: var(--ink-soft); }
  .vb-cq-table td:nth-child(4){ grid-row: 2; grid-column: 2; font-size: .85rem; color: var(--ink-soft); justify-self: end; white-space: nowrap; }
  .vb-cq-table td:nth-child(5){ grid-row: 3; grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 6px; white-space: normal; }
  .vb-cq-table td:nth-child(5) .vb-btn{ width: auto; }

  /* All Members (Name, Email, Role, Edit) */
  .vb-mem-table td:nth-child(1){ grid-row: 1; grid-column: 1; font-weight: 700; }
  .vb-mem-table td:nth-child(2){ grid-row: 2; grid-column: 1 / -1; font-size: .88rem; color: var(--ink-soft); word-break: break-word; }
  .vb-mem-table td:nth-child(3){ grid-row: 1; grid-column: 2; justify-self: end; }
  .vb-mem-table td:nth-child(4){ grid-row: 3; grid-column: 1 / -1; margin-top: 4px; }
}