/* Ignite Tournaments — project-shell layer on top of the vendored Industry design
   system (vendor/industry/styles.css + vendor/industry/industry-extensions.css,
   loaded before this file). This file holds page-shell/layout classes that don't
   belong in the vendored, design-tool-authored files — the equivalent of the
   per-mock inline <style> blocks in the original design handoff.

   Built up batch-by-batch per the redesign plan; each section is labeled with the
   screen it belongs to. */

/* ── Global nav (topbar) ──────────────────────────────────────────────── */
.nav.topbar {
  background: var(--color-accent-900);
  color: #fff;
}
.topbar .nav-brand { color: #fff; margin-right: 0; }
.topbar a { color: rgba(255, 255, 255, 0.8); }
.topbar a:hover, .topbar a[aria-current="page"] { color: #fff; }
.topbar .btn-ghost { color: #fff; }
.topbar .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.topbar .btn-primary { background: #fff; color: var(--color-accent-900); border-color: #fff; }
.topbar .btn-primary:hover { background: var(--color-accent-100); }

/* Avatar — nav (30px) and account-settings profile card (64px, .avatar-lg) */
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--color-accent-400); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; font-family: var(--font-heading);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg {
  width: 64px; height: 64px; font-size: 24px;
}

/* Bootstrap's dropdown-menu JS/markup is kept (see rollout-strategy decision in the
   redesign plan); only its visual treatment is re-skinned to match the design system. */
.dropdown-menu {
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  padding: var(--space-2);
}
.dropdown-menu .dropdown-item {
  color: var(--color-text); /* beat .topbar a's white link color for menus opened from the nav */
  border-radius: 6px;
  font-size: 14px;
  padding: var(--space-2) var(--space-3);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}

/* ── Cards — every mock gives Industry's transparent/line-drawing .card a white
   fill + soft shadow (rather than the base system's blueprint-only look); applied
   globally since all 4 target screens (and every other .card on the site) want it. */
.card {
  background: #fff;
  box-shadow: 0 1px 3px rgba(29, 31, 32, 0.08);
}

/* Design convention: every data table lives inside a .card (style="padding:0;" so
   the table can run edge-to-edge) — never bare, and never with its section title
   floating above the card as an orphaned label. When a table's card needs a title,
   put it in a .table-card-header bar inside the card, above the table, same
   recipe as .comp-count below but generalized for reuse across screens. */
.table-card-header {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider);
}

/* ── Account Settings (Batch 1) ──────────────────────────────────────── */
.settings-wrap { max-width: 1100px; margin: 0 auto; padding: var(--space-6); }
.settings-grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-6); align-items: start; }
.side-col { display: grid; gap: var(--space-6); }
.side-col .card { position: sticky; top: var(--space-4); }
.student-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--color-divider); }
.student-row:first-of-type { border-top: none; }
.student-name { font-weight: 600; font-size: 14px; margin: 0; }
.student-meta { font-size: 12px; opacity: 0.6; margin: 0; }
.settings-section + .settings-section { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.settings-section h3 { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; margin: 0 0 var(--space-3); }
.field-note { font-size: 12px; opacity: 0.6; margin: var(--space-1) 0 0; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.danger-card {
  border-color: var(--color-danger-700) !important;
  border-left: 3px solid var(--color-danger-700) !important;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.danger-card h3 { color: var(--color-danger-700); margin: 0 0 2px; }

@media (max-width: 860px) {
  .settings-grid { grid-template-columns: 1fr; }
  .side-col .card { position: static; }
}

/* ── Admin shell (rail + main) — shared by every admin-sidebar-using screen
   (Rings, Competitors, and not-yet-converted screens like Ring/Competitor show);
   .admin-rail's own look (width/background/border/padding, .rail-link, etc.) comes
   from vendor/industry/industry-extensions.css. (Batch 2) ────────────────────── */
.admin-shell { display: flex; min-height: calc(100vh - 53px); }
.admin-main { flex: 1; min-width: 0; padding: var(--space-6); max-width: 1400px; margin: 0 auto; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-2); }
.page-head h1 { margin: 0; font-size: 28px; }

/* ── Competitors (Batch 3) ───────────────────────────────────────────── */
.filters-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto auto; gap: var(--space-3); align-items: end; }
.sortby-row { display: flex; gap: var(--space-2); }
.sortby-row select { min-width: 0; }
.comp-count { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }
.comp-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }
.comp-row:last-child { border-bottom: none; }
.comp-row:hover { background: var(--color-neutral-100); }
.comp-name { font-family: var(--font-heading); font-weight: 600; font-size: 16px; margin: 0 0 2px; }
.comp-meta { font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin-bottom: 6px; }
.comp-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.comp-tags .tag { font-size: 11px; padding: 2px 8px; }
.comp-ring-link { font-size: 14px; font-weight: 600; flex: none; white-space: nowrap; }

@media (max-width: 860px) {
  .filters-row { grid-template-columns: 1fr 1fr; }
}

/* ── Public Tournament page (Batch 4) ────────────────────────────────── */
.page-main { max-width: 1180px; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-8); display: grid; gap: var(--space-6); }
.hero-banner { aspect-ratio: 2.2 / 1; }
.hero-sec h1 { font-size: 28px; margin: 0 0 6px; }
.stats-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.stat-card { flex: 1; text-align: center; padding: var(--space-4) var(--space-3); }
.stat-card .stat-num { display: block; font-family: var(--font-heading); font-size: 30px; color: var(--color-accent-700); line-height: 1; }
.stat-card .stat-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; }
.promo-card { flex-direction: column; align-items: flex-start !important; }
.promo-card .btn { width: 100%; }
.layout-sec { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.filters { display: flex; flex-direction: column; gap: var(--space-3); }
.filters .field { width: 100%; }
.rings-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.tabs .tab { flex: 1; justify-content: center; }
.tab[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.tab[aria-current="page"] .count { background: var(--color-accent-100); color: var(--color-accent-800); }
.ring-card { display: flex; flex-direction: column; gap: var(--space-2); }
.ring-top { display: flex; align-items: center; gap: var(--space-2); }
.ring-student-names { font-size: 12px; background: var(--color-accent-100); color: var(--color-accent-800); border-radius: 6px; padding: 4px 8px; }

/* Tag-styled checkbox toggle (Tiger / Special Abilities filter chips) — same
   :has()-driven technique as the .seg-opt control in vendor/industry/styles.css. */
.tag-toggle { display: inline-flex; cursor: pointer; }
.tag-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.tag-toggle:has(input:checked) .tag { background: var(--color-accent-100); color: var(--color-accent-800); border-color: var(--color-accent); }

@media (min-width: 640px) {
  .rings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .hero-banner { aspect-ratio: 4 / 1; }
  .hero-sec h1 { font-size: 44px; }
  .promo-card { flex-direction: row !important; align-items: center !important; }
  .promo-card .btn { width: auto; }
  .layout-sec { flex-direction: row; align-items: flex-start; }
  .filters { width: 220px; flex: none; }
  .rings-grid { grid-template-columns: repeat(3, 1fr); }
  .tabs .tab { flex: none; justify-content: flex-start; }
}

/* ── Tournament Breakdown (admin) ─────────────────────────────────────── */
/* Cards in a row share one height; a long table (Rank) scrolls inside its card with the column headings pinned,
   instead of stretching its row and leaving dead space beside the shorter ones. */
.breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); column-gap: var(--space-4); align-items: stretch; }
.breakdown-grid > .card { overflow: hidden; }
.breakdown-grid .table-responsive { flex: 1; max-height: 24rem; overflow-y: auto; }
.breakdown-grid .table thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.ring-number-select { width: auto; min-width: 4.5rem; }

/* ── Student Lookup (tournament page) ────────────────────────────────── */
.lookup-results { list-style: none; margin: var(--space-2) 0 0; padding: 0; border: 1px solid var(--color-divider); border-radius: 8px; overflow: hidden; background: var(--color-surface); }
.lookup-results > li + li { border-top: 1px solid var(--color-divider); }
.lookup-result { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: var(--space-2) var(--space-3); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lookup-result:hover, .lookup-result:focus-visible { background: var(--color-accent-100); }
.lookup-name { font-weight: 600; }
.lookup-details { font-size: 13px; opacity: 0.7; }
.lookup-empty { padding: var(--space-2) var(--space-3); font-size: 13px; opacity: 0.7; }

/* ── Flash toasts (shared/_flash_toasts) ──────────────────────────────── */
/* Industry's .toast-stack is a top-right demo stack; this pins it to the viewport's bottom-right. The .show class
   on each toast is only there because Bootstrap's own .toast hides itself without it. */
.toast-stack-fixed { position: fixed; top: auto; bottom: var(--space-4); right: var(--space-4); z-index: 1080; width: min(320px, calc(100vw - 2 * var(--space-4))); }
.toast-stack-fixed .toast { width: 100%; border-radius: 10px; transition: opacity 0.2s ease, transform 0.2s ease; animation: toast-in 0.2s ease-out; }
.toast-stack-fixed .toast.is-leaving { opacity: 0; transform: translateY(8px); }
/* Tinted with the matching .alert-success / .alert-danger fills rather than Industry's white toast, so the result
   reads at a glance from the corner of the screen. */
.toast-stack-fixed .toast-success { background: var(--color-secondary-200); border-color: var(--color-secondary-400); border-left-color: var(--color-secondary-600); color: var(--color-secondary-900); }
.toast-stack-fixed .toast-danger { background: var(--color-danger-100); border-color: #e5a49c; border-left-color: var(--color-danger-700); color: #6e211a; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast-stack-fixed .toast { transition: none; animation: none; } }

/* ── Competitor check-in: ring filters ───────────────────────────────── */
.check-in-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); align-items: end; }
.check-in-filters .field { margin: 0; }

/* ── Ring merge (rings/index merge mode + ring_merges/*) ──────────────── */
.tag-warning { background: #fdf3e0; color: #6b4a10; border: 1px solid #f0d59a; }
.merge-step { margin: 0 0 var(--space-1); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.merge-settings { padding: 0; gap: 0; }
.merge-settings-body { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }
.merge-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); align-items: start; }
.merge-fields .field { margin: 0; }
.merge-ring-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.merge-check { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 14px; }
.merge-summary { margin: 0; padding: var(--space-3) var(--space-4); font-size: 14px; }
.merge-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-bottom: var(--space-6); }

/* Merge mode on the Rings table: a checkbox column that only shows while picking, and a bar to continue. */
.merge-col { display: none; width: 2.5rem; }
.is-merging .merge-col { display: table-cell; }
.merge-pair-note { display: none; font-size: 12px; opacity: 0.7; }
.is-merging .merge-pair-note { display: block; }
.merge-bar { position: sticky; bottom: var(--space-4); z-index: 5; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: #fff; border: 1px solid var(--color-divider);
  border-radius: 12px; box-shadow: var(--shadow-md); }
.merge-bar[hidden] { display: none; }

/* ── Admin Dashboard ──────────────────────────────────────────────────── */
.dash-range { margin: 4px 0 0; font-size: 13px; opacity: 0.65; }
.dash-filters { display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap; }
.dash-filters .field { min-width: 180px; }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.dash-kpis .stat-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stat-delta { font-size: 12px; opacity: 0.6; }
.stat-delta-up { color: var(--color-secondary-700); opacity: 1; }
.stat-delta-down { color: #a3412c; opacity: 1; }
.dash-note { font-size: 13px; opacity: 0.65; margin: var(--space-3) 0 var(--space-4); max-width: 75ch; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-4); }
.dash-card { padding: 0; overflow: hidden; }
.dash-wide { grid-column: 1 / -1; }
.dash-chart { padding: var(--space-3) var(--space-4); }
.dash-chart-area { position: relative; } /* Chart.js sizes the canvas to this box */
.dash-sub { font-weight: 400; opacity: 0.6; margin-left: 4px; }
.dash-empty { margin: 0; padding: var(--space-6) var(--space-4); text-align: center; opacity: 0.6; }

/* ── Admin list pagination ───────────────────────────────────────────── */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); font-size: 14px; }
.pager-summary { opacity: 0.65; }
.pager-pages { display: flex; gap: 4px; flex-wrap: wrap; }
.pager-pages a, .pager-pages span { min-width: 2.25rem; text-align: center; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--color-divider); text-decoration: none; }
.pager-pages a:hover { background: var(--color-accent-100); }
.pager-pages [aria-current="page"] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 600; }
.pager-pages .pager-gap, .pager-pages .is-disabled { border-color: transparent; opacity: 0.45; }