/* ============================================================================
   ui.css — shadcn/ui-style component layer for the rankings page (design
   direction #2: shadcn structure, Volleyball Rankings brand colors).

   Loaded after apple-theme.css and theme.css so it restyles, without
   replacing, the page's own markup. Every color comes from the page's
   variables (--accent2, --surface, --border, --text, --text2), so light and
   dark themes both work: primary = --accent2 (navy #16467A by day, light blue
   by night), text on primary = --surface (white by day, navy by night).
   The SITE-WIDE section at the end applies the same components to every
   public page (buttons, inputs, selects, cards, table headers, badges,
   toggles). It changes look only: shape, color, focus ring, never layout.
   Pages whose plain .btn is a filled primary button say so with
   <body data-ui-btn="solid">; elsewhere .btn is the outline button.
   ============================================================================ */

:root {
  --ui-primary: var(--accent2, #16467A);
  --ui-on-primary: var(--surface, #ffffff);
  --ui-muted: color-mix(in srgb, var(--text, #041C3D) 7%, transparent);
  --ui-tint: color-mix(in srgb, var(--accent2, #16467A) 12%, transparent);
  --ui-hover: color-mix(in srgb, var(--accent2, #16467A) 6%, transparent);
  --ui-ring: 0 0 0 2px var(--bg, #F4F7FA), 0 0 0 4px var(--accent2, #16467A);
  --ui-shadow-xs: 0 1px 2px rgba(4, 28, 61, 0.06);
  --ui-move-up-bg: #dcfce7;   --ui-move-up: #166534;
  --ui-move-down-bg: #fee2e2; --ui-move-down: #991b1b;
}
:root[data-theme="dark"] {
  --ui-move-up-bg: rgba(95, 207, 112, 0.16);  --ui-move-up: #7ee08c;
  --ui-move-down-bg: rgba(255, 107, 94, 0.16); --ui-move-down: #ff8a80;
  --ui-shadow-xs: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-move-up-bg: rgba(95, 207, 112, 0.16);  --ui-move-up: #7ee08c;
    --ui-move-down-bg: rgba(255, 107, 94, 0.16); --ui-move-down: #ff8a80;
    --ui-shadow-xs: none;
  }
}

/* ---- Controls row ------------------------------------------------------- */
.controls { gap: 10px; margin-bottom: 16px; }

/* Boys | Girls — pill tabs, active segment filled with the brand color.
   (the body prefix out-ranks the styles season-switcher.js injects;
   Rankings, Clubs and Tournaments all use this toggle.) */
body .gender-toggle {
  display: inline-flex; height: 36px; align-items: center; gap: 0;
  padding: 3px; border: 0; border-radius: 999px; background: var(--ui-muted);
  box-sizing: border-box;
}
body .gender-toggle[hidden] { display: none; }
body .gender-toggle button {
  height: 30px; padding: 0 16px; border-radius: 999px; border: 0;
  font-size: 14px; font-weight: 500; color: var(--text2, #5C6B80); background: transparent;
}
body .gender-toggle button:hover { color: var(--text, #041C3D); }
body .gender-toggle button.active {
  background: var(--ui-primary); color: var(--ui-on-primary); font-weight: 600;
}
body .gender-toggle button:focus-visible { outline: none; box-shadow: var(--ui-ring); }

/* Season and age — shadcn Select triggers (native <select>, custom chevron). */
.controls select {
  -webkit-appearance: none; appearance: none;
  height: 40px; padding: 0 36px 0 12px; border-radius: 8px;
  border: 1px solid var(--border, #DCE4EC); background-color: var(--surface, #fff);
  color: var(--text, #041C3D); font-size: 14px; font-weight: 500; font-family: inherit;
  box-shadow: var(--ui-shadow-xs); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d8ea4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.controls select:focus, .controls select:focus-visible { outline: none; border-color: var(--ui-primary); box-shadow: var(--ui-ring); }

/* All / Open / Premier — pill toggles. */
.controls .tier-filter { gap: 6px; padding: 0; border: 0; background: transparent; }
.controls .tier-btn {
  height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border, #DCE4EC); background: var(--surface, #fff);
  color: var(--text, #041C3D); font-size: 13px; font-weight: 500;
}
.controls .tier-btn:hover { background: var(--ui-hover); color: var(--text, #041C3D); }
.controls .tier-btn.active {
  background: var(--ui-primary); border-color: var(--ui-primary);
  color: var(--ui-on-primary); font-weight: 600;
}
.controls .tier-btn:focus-visible { outline: none; box-shadow: var(--ui-ring); }

/* Tuesday preview — dashed outline button with a lightning icon. */
.ui-btn-dashed {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border-radius: 8px; border: 1px dashed var(--ui-primary); background: var(--surface, #fff);
  color: var(--ui-primary); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.ui-btn-dashed[hidden] { display: none; }
.ui-btn-dashed::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ui-btn-dashed:hover { background: var(--ui-hover); }
.ui-btn-dashed:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.ui-btn-dashed:disabled { opacity: 0.5; cursor: default; }

/* Phone: tabs + preview on one line, season and age side by side, tiers below. */
@media (max-width: 768px) {
  .controls { display: flex; flex-wrap: wrap; }
  .controls .gender-toggle { order: 1; }
  .controls #earlyToggle { order: 2; margin-left: auto; }
  .controls #seasonSelect, .controls #divisionSelect { order: 3; flex: 1 1 calc(50% - 5px); min-width: 0; width: auto; }
  .controls .tier-filter { order: 4; flex: 1 1 100%; }
}

/* ---- Table card --------------------------------------------------------- */
.table-section {
  border-radius: 12px; border: 1px solid var(--border, #DCE4EC);
  box-shadow: var(--ui-shadow-xs);
}
.table-section h3 { padding: 14px 16px; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }

.tbl-search {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 44px;
  border-bottom: 1px solid var(--border, #DCE4EC); color: var(--text2, #5C6B80); cursor: text;
}
.tbl-search:focus-within { background: var(--ui-hover); color: var(--ui-primary); }
body .tbl-search input,
body .tbl-search input:focus {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; outline: none;
  color: var(--text, #041C3D); font-size: 15px; font-family: inherit;
}

/* Header row: small caps labels; sortable columns get a chevrons icon,
   the active one a tinted pill and an arrow (shadcn data-table sort). */
#rankingsTable thead { background: var(--surface2, #F9FBFD); }
#rankingsTable th {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text2, #5C6B80);
  white-space: nowrap;
}
#rankingsTable th:hover { background: var(--ui-hover); color: var(--text, #041C3D); }
#rankingsTable th.sortable::after,
#rankingsTable th.sort-asc::after,
#rankingsTable th.sort-desc::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 5px; vertical-align: -1px;
  background: currentColor; opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
#rankingsTable th.sort-asc, #rankingsTable th.sort-desc { color: var(--ui-primary); }
#rankingsTable th.sort-asc::after, #rankingsTable th.sort-desc::after { opacity: 1; }
#rankingsTable th.sort-asc::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7M12 19V5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7M12 19V5'/%3E%3C/svg%3E");
}
#rankingsTable th.sort-desc::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E");
}

/* Rows */
#rankingsTable td { border-bottom-color: color-mix(in srgb, var(--border, #DCE4EC) 70%, transparent); }
#rankingsTable tbody tr:hover { background: var(--ui-hover); }
#rankingsTable td:first-child { font-weight: 700; color: var(--text, #041C3D); font-variant-numeric: tabular-nums; }
#rankingsTable td { font-variant-numeric: tabular-nums; }
#rankingsTable .team-name { color: var(--ui-primary); font-weight: 500; }

/* Movement since the last update — tinted badge. */
body .rank-move {
  font-size: 11px; font-weight: 700; line-height: 18px; padding: 0 6px; border-radius: 6px;
}
body .rank-move.up { background: var(--ui-move-up-bg); color: var(--ui-move-up); }
body .rank-move.down { background: var(--ui-move-down-bg); color: var(--ui-move-down); }

/* Small badges (division, provisional, gate) — rounded like shadcn Badge. */
#rankingsTable .div-badge { border-radius: 999px; padding: 1px 8px; font-weight: 500; }

/* Phone: the rank and record columns are too narrow for their labels plus
   a sort icon, so they read "#" and "W-L" there (labels swapped in CSS;
   the header text itself is unchanged for screen readers). */
@media (max-width: 640px) {
  #rankingsTable th:nth-child(1), #rankingsTable th:nth-child(5) { font-size: 0; letter-spacing: 0; }
  #rankingsTable th:nth-child(1)::before, #rankingsTable th:nth-child(5)::before {
    font-size: 12px; letter-spacing: 0.04em; vertical-align: middle;
  }
  #rankingsTable th:nth-child(1)::before { content: "#"; }
  #rankingsTable th:nth-child(5)::before { content: "W-L"; }
  #rankingsTable th:nth-child(1)::after, #rankingsTable th:nth-child(5)::after { margin-left: 3px; }
}


/* ============================================================================
   SITE-WIDE components (every page that links ui.css)
   ============================================================================ */

/* ---- Buttons ------------------------------------------------------------ */
body .btn, body .btn-accent, body .btn-primary, body .btn-google,
body .submit-btn, body .reset-btn {
  border-radius: 8px; font-family: inherit; font-weight: 600; transform: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
/* Primary: brand fill, readable text in both themes (dark: navy on light blue). */
body[data-ui-btn="solid"] .btn:not(.ghost):not(.danger),
body .btn-accent, body .btn-primary, body .submit-btn {
  background: var(--ui-primary); border: 1px solid var(--ui-primary); color: var(--ui-on-primary);
}
body[data-ui-btn="solid"] .btn:not(.ghost):not(.danger):hover:not(:disabled),
body .btn-accent:hover:not(:disabled), body .btn-primary:hover:not(:disabled),
body .submit-btn:hover:not(:disabled) {
  background: var(--ui-primary); box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.1); transform: none;
}
body .submit-btn:disabled { background: var(--ui-primary); opacity: 0.5; }
/* Outline: surface fill, hairline border. */
body:not([data-ui-btn="solid"]) .btn:not(.btn-accent):not(.btn-yellow),
body .btn.ghost, body .btn.danger, body .btn-google, body .reset-btn {
  background: var(--surface, #fff); border: 1px solid var(--border, #DCE4EC);
  color: var(--text, #041C3D); box-shadow: var(--ui-shadow-xs);
}
body:not([data-ui-btn="solid"]) .btn:not(.btn-accent):not(.btn-yellow):hover:not(:disabled),
body .btn.ghost:hover:not(:disabled), body .btn-google:hover, body .reset-btn:hover {
  background: var(--ui-hover); border-color: var(--border, #DCE4EC);
}
body .btn.ghost { color: var(--ui-primary); }
body .btn.danger { color: var(--red, #D64545); }
body .btn.danger:hover { background: color-mix(in srgb, var(--red, #D64545) 9%, transparent); }
body .btn:focus-visible, body .btn-accent:focus-visible, body .btn-primary:focus-visible,
body .btn-google:focus-visible, body .submit-btn:focus-visible, body .reset-btn:focus-visible {
  outline: none; box-shadow: var(--ui-ring);
}

/* ---- Pill toggles: sort buttons (Tournaments), Plain/Technical (Methodology) */
body .sort-btn {
  height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border, #DCE4EC);
  background: var(--surface, #fff); color: var(--text, #041C3D); font-size: 13px; font-weight: 500;
}
body .sort-btn:hover { background: var(--ui-hover); border-color: var(--border, #DCE4EC); color: var(--text, #041C3D); }
body .sort-btn.active { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-on-primary); font-weight: 600; }
body .sort-btn:focus-visible { outline: none; box-shadow: var(--ui-ring); }

body .view-toggle { padding: 3px; gap: 0; border: 0; border-radius: 999px; background: var(--ui-muted); }
body .view-toggle button { border: 0; border-radius: 999px; padding: 8px 18px; font-weight: 500; color: var(--text2, #5C6B80); }
body .view-toggle button.active { border: 0; padding: 8px 18px; box-shadow: none; background: var(--ui-primary); color: var(--ui-on-primary); font-weight: 600; }
body .view-toggle button:focus-visible { outline: none; box-shadow: var(--ui-ring); }

/* ---- Inputs, selects, textareas ---------------------------------------- */
body input[type="text"], body input[type="email"], body input[type="password"],
body input[type="search"], body input[type="url"], body input[type="number"], body input[type="tel"],
body select, body textarea {
  border-radius: 8px; border: 1px solid var(--border, #DCE4EC); background-color: var(--surface, #fff);
  color: var(--text, #041C3D); font-family: inherit; box-shadow: var(--ui-shadow-xs);
}
body input[type="text"]:focus, body input[type="email"]:focus, body input[type="password"]:focus,
body input[type="search"]:focus, body input[type="url"]:focus, body input[type="number"]:focus,
body input[type="tel"]:focus, body select:focus, body textarea:focus {
  outline: none; border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2, #16467A) 22%, transparent);
}
body input.error, body input.error:focus { border-color: var(--red, #D64545); }
body select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d8ea4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
/* iOS zooms into inputs under 16px; keep phones at 16px. */
@media (max-width: 640px) {
  body input[type="text"], body input[type="email"], body input[type="password"],
  body input[type="search"], body input[type="url"], body input[type="number"], body input[type="tel"],
  body select, body textarea { font-size: 16px; }
}

/* ---- Cards ---------------------------------------------------------------- */
body .card, body .club-card, body .accordion-item, body .modal-content,
body .weight-card, body .cindex-cell, body .upload-zone {
  border-radius: 12px; box-shadow: var(--ui-shadow-xs);
}
body .club-card:hover { transform: none; border-color: var(--ui-primary); box-shadow: 0 4px 14px rgba(4, 28, 61, 0.1); }
body .accordion-header:hover { background: var(--ui-hover); }
body .upload-zone:hover, body .upload-zone.dragover { border-color: var(--ui-primary); background: var(--ui-hover); }

/* Callouts read as shadcn Alerts: full hairline border, soft brand tint. */
body .callout { border: 1px solid var(--border, #DCE4EC); border-radius: 10px; background: var(--ui-hover); }
body .msg { border-radius: 8px; }

/* ---- Table headers -------------------------------------------------------- */
body table.sc th, body .mult-table th, body .table-section table th {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text2, #5C6B80);
  border-bottom: 1px solid var(--border, #DCE4EC);
}
body table.sc tbody tr:hover, body .table-section tbody tr:hover { background: var(--ui-hover); }

/* ---- Badges -------------------------------------------------------------- */
body .pill, body .tier-badge, body .status-chip, body .badge, body .club-rank-badge.numeric { border-radius: 999px; }

/* The rankings search box lives inside the table card: keep it borderless
   (out-ranks the site-wide input rules above). */
body label.tbl-search input,
body label.tbl-search input:focus { border: 0; border-radius: 0; box-shadow: none; background: transparent; }