/* NewTon DC - Tournament Manager
   Minimalistic flat 2D design
   - Clean, airy interface with muted colors
   - Selective accent colors for actions
   - Professional desktop-focused layout
   integrity: 4e-65-77-54-6f-6e-20-44-43
*/

/* Fonts */
@font-face {
  font-family: 'Droid Serif';
  src: url('../fonts/DroidSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Droid Serif';
  src: url('../fonts/DroidSerif-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Insignia';
  src: url('../fonts/Insignia-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Code';
  src: url('../fonts/CascadiaCode-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Code';
  src: url('../fonts/CascadiaCode-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* CSS Variables */
:root {
  --font-body: 'Manrope', sans-serif;
  --font-clock:'Cascadia Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* App shell */
body {
  font-family: var(--font-body);
  background: var(--nt-bg, #f1f5f5); /* the redesigned pages' background, so no frame shows around them; old pages without the tokens keep the old grey */
  min-height: 100vh;
  color: #2a2a2a;
}

.container {
  width: 100%;
  margin: 0;
  padding: 20px;
}

/* Header */
.header {
  background: #ffffff;
  border: 1px solid #666666;
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  color: #000000;
  font-size: 2.25rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 15px;
  /* font-family: 'Droid Serif', serif; */
  font-family: 'Insignia';
}

.logo-placeholder {
  width: 60px;
  height: 60px;
  background: #f5f5f5;
  border: 1px solid #c0c0c0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.2;
}

.club-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #e5e7eb;
  overflow: hidden;
}

/* Nav */
.nav {
  display: flex;
  gap: 32px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.nav-btn {
  padding: 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: #444444;
  cursor: pointer;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-btn:hover {
  color: #222222;
}

.nav-btn.active {
  color: #222222;
  font-weight: 400;
  border-bottom-color: rgba(22, 101, 52, 1);
}

/* Header clock - matches Match Controls clock styling */
.header-clock {
  font-family: var(--font-clock);
  font-size: 18px;
  font-weight: normal;
  border: 1px solid #ccc;
  padding: 8px 16px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.24);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-tournament-status {
  color: #6b7280;
  font-size: 14px;
  font-weight: 400;
  text-align: right;
  line-height: 1.3;
  white-space: nowrap;
}

.header-tournament-status strong {
  color: #111827;
  font-weight: 600;
}

.header-tournament-status .status-prefix {
  display: none;
}

.header-tournament-wide strong {
  display: block;
  font-size: 15px;
}

.header-tournament-wide .tournament-date {
  font-size: 13px;
}

.header-tournament-narrow {
  display: none;
}

@media (max-width: 1120px) {
  .header-tournament-wide {
    display: none;
  }
  .header-tournament-narrow {
    display: block;
    text-align: center;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
  }
  .header-tournament-narrow .status-prefix {
    display: inline;
  }
  .header-clock {
    display: none;
  }
  .header h1 {
    font-size: 1.5rem;
  }
  .header {
    padding: 12px;
    margin-bottom: 12px;
    gap: 8px;
  }
}

/* Tournament Page */
.page {
  display: none;
  background: #ffffff;
  border-radius: 0;
  padding: 24px;
  box-shadow: none;
  color: #111827; /* ensure readable text on light page */
}

.page.active {
  display: block;
}

/* Tournament page fullscreen override */
#tournament.page {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  height: 100vh;
  overflow: hidden;
}

#tournament.page.active {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

/* Forms */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: #111827;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  color: #111827;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input::placeholder {
  color: #6b7280;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #ff6b35;
  box-shadow: 0 0 0 3px rgba(255,107,53,0.15);
}

.form-group input:disabled,
.form-group select:disabled {
  background: #f3f4f6;
  color: #6b7280;
}

/* Buttons */
.btn {
  padding: 12px 20px;
  border: 1px solid #b0b0b0;
  border-radius: 6px;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.15s ease;
  margin-right: 10px;
  margin-bottom: 10px;
  height: 44px;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn:hover {
  background: #f8f8f8;
  border-color: #999999;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
}

.btn-success {
  color: #166534;
  border-color: #166534;
}
.btn-success:hover {
  background: #dcfce7;
  border-color: #166534;
}

.btn-danger {
  color: #dc2626;
  border-color: #dc2626;
}
.btn-danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

.btn-warning {
  color: #d97706;
  border-color: #d97706;
}
.btn-warning:hover {
  background: #fef3c7;
  border-color: #d97706;
}

/* Remove blue focus outline from buttons, except modal default buttons */
.btn:focus:not([style*="boxShadow"]),
.nav-btn:focus {
  outline: none;
}

/* Press feedback — subtle tactile shift on click */
.btn:active,
.nav-btn:active,
.help-btn:active,
.analytics-reset-btn:active,
.analytics-back-btn:active,
.close:active {
  transform: translate(1.5px, 1.5px);
}

/* Tournament info grid */
.tournament-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* Registration page flex layout - sticky footer */
/* !IMPORTANT CLEANUP: Could use higher specificity instead of !important - OPTIMIZATION CANDIDATE */

/* Only apply when page is actually active */

/* Registration page two-column layout */

/* Player cards in single column */

/* Results section adjustments */
#resultsSection {
  margin-top: 0; /* Remove top margin since it's now inline */
}

/* Navigation button layout with left-aligned icon/arrow and centered text */
.nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.watermark-left {
  position: absolute;
  left: 30px;
  font-family: 'Inter';
  font-size: 16px;
  color: #696969;
}

/* Internal borders - only where needed for CAD style */

/* Row 1: Format spans two columns, Players on right */


/* State badges */
.match-state-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 8px;
  font-weight: 800;
  color: #ffffff;
  z-index: 20;
}
.match-state-badge.pending   { background: #6b7280; }
.match-state-badge.ready     { background: #f59e0b; color: #111827; }
.match-state-badge.live      { background: #ff6b35; animation: pulse 2s infinite; }
.match-state-badge.completed { background: #16a34a; }

/* Modals */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: rgba(255, 255, 255, 0.9);
  margin: 5% auto;
  padding: 28px;
  border-radius: 0;
  width: 90%;
  max-width: 640px;
  max-height: 80vh; /* Limit modal height */
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  color: #111827;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent content overflow */
}

/* Remove rounded corners from all inputs in modals */
.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content input[type="date"],
.modal-content input[type="text"]:focus,
.modal-content input[type="number"]:focus,
.modal-content input[type="date"]:focus {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

/* === Dialog system (.dlg) — newer modal pattern, used alongside .modal-content === */
/* Sits inside an existing .modal backdrop. Two layouts: default (single column) and --split (sidebar + main). */
.dlg {
  margin: 5% auto;
  width: 90%;
  max-width: 580px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20, 25, 35, 0.06), 0 20px 50px rgba(20, 25, 35, 0.16);
  overflow: hidden;
  color: #2a2f3a;
}

.dlg__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0;
  color: #1a1f2a;
  padding-bottom: 14px;
  border-bottom: 1px solid #ecedf1;
}

.dlg__desc {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.dlg__note {
  background: #ffffff;
  border: 1px solid #ecedf1;
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(20, 25, 35, 0.04), 0 4px 12px rgba(20, 25, 35, 0.06);
}
.dlg__note > * + * { margin-top: 10px; }
.dlg__note .dlg__desc { color: #2a2f3a; }

.dlg__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #4a5160;
  margin-bottom: 8px;
}

.dlg__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d8dbe2;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border 0.15s, box-shadow 0.15s;
}

.dlg__input:focus {
  border-color: #5b8def;
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.15);
}

.dlg__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px;
  background: #fbfbfc;
  border-top: 1px solid #ecedf1;
}

/* --split: metadata sidebar on the left, main content on the right */
.dlg--split { max-width: 720px; }
/* --wide: ~20% wider, used when content (long player names, 3-button footers) needs more room */
.dlg--wide  { max-width: 880px; }
.dlg__grid { display: grid; grid-template-columns: 260px 1fr; }
.dlg__sidebar {
  padding: 24px 20px;
  background: #f7f8fa;
  border-right: 1px solid #ecedf1;
}
.dlg__sidebar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8b91a0;
  margin-bottom: 4px;
}
.dlg__sidebar-value {
  font-size: 15px;
  font-weight: 600;
  color: #1a1f2a;
  margin-bottom: 14px;
}
.dlg__sidebar-value:last-child { margin-bottom: 0; }
.dlg__main { padding: 24px; }
.dlg__main > * + * { margin-top: 14px; }

.dlg__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7;
  color: #d97706;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.dlg__pill::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #d97706;
  border-radius: 50%;
}
.dlg__pill--danger { background: #fee2e2; color: #dc2626; }
.dlg__pill--danger::before { background: #dc2626; }

.close {
  color: #6b7280;
  float: right;
  font-size: 28px;
  font-weight: 800;
  cursor: pointer;
  margin-top: -6px;
}
.close:hover { color: #111827; }

/* Alerts */
.alert {
  padding: 15px;
  margin: 15px 0;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #111827;
}

.alert-info {
  color: #0b3a42;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-success {
  color: #0f5132;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-warning {
  color: #5c3d00;
  background-color: #fff3cd;
  border-color: #ffeaa7;
}

/* Animations */
@keyframes pulse {
  0%   { box-shadow: 0 6px 18px rgba(255,107,53,0.28); }
  50%  { box-shadow: 0 10px 26px rgba(255,107,53,0.45); transform: translateY(-1px); }
  100% { box-shadow: 0 6px 18px rgba(255,107,53,0.28); }
}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  color: #4b5563;
  font-size: 14px;
  border: 1px solid #666666;
  margin-top: 20px;
  background: #ffffff;
  border-radius: 0;
}

footer a {
  color: inherit;
  text-decoration: none;
}

footer a:hover {
  color: inherit;
  text-decoration: underline;
}

/* Utilities */
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* Links */
a { color: #1d4ed8; }
a:hover { color: #1e40af; }

/* Help system styles */
.help-btn {
    position: absolute !important;
    right: 20px !important;
    top: 20px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 2px solid #ff6b35 !important;
    background: #ffffff !important;
    color: #ff6b35 !important;
    font-weight: bold !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}

.help-btn:hover {
    background: #ff6b35;
    color: #ffffff;
    transform: scale(1.1);
}

.help-modal {
    font-family: var(--font-body) !important;
}

.help-modal h4 {
    margin: 0 0 10px 0 !important;
    color: #ff6b35 !important;
}

.help-modal ul, .help-modal ol {
    margin: 10px 0 !important;
    padding-left: 20px !important;
}

.help-modal li {
    margin: 5px 0 !important;
}

.help-modal p {
    margin: 10px 0 !important;
}

.help-modal strong {
    color: #111827 !important;
}

/* Validation message styles */
#legValidationMessage {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    background: #fff5f5;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Enhanced input styling for validation states */
#winnerLegs:invalid, #loserLegs:invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

#winnerLegs:valid, #loserLegs:valid {
    border-color: #16a34a !important;
}

/* Disabled confirm button styling */
#winnerConfirmOK:disabled {
    background: #6b7280 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Help hint animation */
@keyframes slideDown {
    from { 
        transform: translateX(-50%) translateY(-100%); 
        opacity: 0; 
    }
    to { 
        transform: translateX(-50%) translateY(0); 
        opacity: 1; 
    }
}

/* Stats modal should appear above Command Center */
#statsModal {
  z-index: 1100 !important;
}

/* Match Command Center */


/* Tournament Configuration Display Grid */


/* Tournament Completion Celebration Podium */
/* === Tournament Completion Celebration === */


/* Dynamic garland strands — decorative SVG behind the podium */


/* Keep all content above the garlands */


/* Podium — tiered Olympic-style blocks with cards on top */


/* Medal discs — CSS-only with metallic radial gradients */


/* Tiered blocks below each card */


/* Highlights */


/* Tournament Achievements Column Styling */


.export-description {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
  font-style: italic;
}

/* Winner Confirmation — progression lines + sidebar stats buttons */
.winner-progression {
  margin: 14px 0;
}
.winner-progression__title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8b91a0;
  margin-bottom: 6px;
}
.winner-progression__winner { color: #065f46; margin-bottom: 2px; }
.winner-progression__loser  { color: #dc2626; }
.winner-progression__note { margin-top: 8px; font-size: 13px; color: #6b7280; }
.winner-stats-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.winner-stats-stack .btn {
  width: 100%;
  margin: 0;
}

/* Light-touch alignment for non-.dlg modals — rounded corners + solid white background
   to match the .dlg aesthetic without restructuring the content inside. */
#matchQRModal .modal-content,
#qrResultScanModal .modal-content,
#matchDetailModal .modal-content {
  border-radius: 10px;
  background-color: #ffffff;
}
/* Title separator — mirrors the .dlg__title border-bottom for light-touch alignment */
#matchDetailModal .modal-content > h3 {
  border-bottom: 1px solid #ecedf1;
  padding-bottom: 14px;
}

/* Player Statistics editor — counter row + list editors */
#statsModal .dlg { max-width: 620px; }  /* slightly wider than default 580px for the 3-col counter row */

.stats-counter-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat-counter {
  background: #f8f9fa;
  border: 1px solid #ecedf1;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.stat-counter__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8b91a0;
  font-weight: 600;
  margin-bottom: 10px;
}
.stat-counter__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.stat-counter__value {
  font-size: 22px;
  font-weight: 700;
  color: #1a1f2a;
  min-width: 28px;
  text-align: center;
}
.stat-counter__btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d8dbe2;
  background: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.stat-counter__btn:active { transform: translate(1.5px, 1.5px); }
.stat-counter__btn--minus { color: #dc2626; }
.stat-counter__btn--minus:hover { background: #fef2f2; border-color: #dc2626; }
.stat-counter__btn--plus { color: #166534; }
.stat-counter__btn--plus:hover { background: #dcfce7; border-color: #166534; }

.stat-list-editor__input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.stat-list-editor__input-row .dlg__input { flex: 1; }
.stat-list-editor__input-row .btn { margin: 0; flex-shrink: 0; }

/* Chip list — segmented-control style, each chip is clickable to remove */
.stat-list-editor__items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  padding: 4px;
  background: #f3f5f7;
  border-radius: 8px;
}
.stat-list-editor__items:empty { display: none; }

.stat-list-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: white;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #1a1f2a;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.stat-list-item:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.stat-list-item:active { transform: translate(1.5px, 1.5px); }

.stat-list-item__x {
  color: #b0b6c0;
  font-size: 16px;
  line-height: 1;
  transition: color 0.15s;
}
.stat-list-item:hover .stat-list-item__x { color: #dc2626; }

/* Bracket confirmation — read-only player chips in a scrollable wrap-flow */
.bracket-confirm-players {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: #f3f5f7;
  border-radius: 8px;
  max-height: 280px;
  overflow-y: auto;
}
.bracket-confirm-player {
  background: white;
  border: 1px solid #ecedf1;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1f2a;
}

/* Upload modal — option cards (radio) + destination info */
.upload-source-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upload-source-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f8f9fa;
  border: 1px solid #ecedf1;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: 14px;
  color: #1a1f2a;
}
.upload-source-option:hover { background: #ecedf1; }
.upload-source-option input[type="radio"] { margin: 0; }
.upload-destination {
  background: #f3f5f7;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
}
.upload-destination__title {
  font-weight: 600;
  margin-bottom: 6px;
  color: #4a5160;
}
.upload-destination__list {
  margin: 0;
  padding-left: 18px;
  color: #6b7280;
}
.upload-destination__list li { margin: 2px 0; }

/* Enhanced Undo Confirmation Modal */
.undo-header {
  font-size: 16px;
  margin-bottom: 20px;
  color: #111827;
  text-align: center;
}

.undo-matches-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 8px; /* Space for scrollbar */
  margin-bottom: 20px; /* Space before buttons */
  max-height: 40vh; /* Reasonable max height with scrolling */
}

.undo-match-card {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.undo-match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.undo-match-id {
  font-weight: 600;
  font-size: 14px;
  color: #111827;
}

.undo-bracket-type {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.undo-match-players {
  font-size: 14px;
  color: #374151;
  text-align: center;
  padding: 8px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

.undo-no-matches {
  text-align: center;
  color: #6b7280;
  font-style: italic;
  padding: 20px;
  background: #f9fafb;
  border-radius: 0;
  margin-bottom: 20px;
}

.undo-achievements {
  margin: 16px 0 8px;
  padding: 12px 14px;
  background: #fef9ec;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  font-size: 14px;
}

.undo-achievements-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: #92400e;
}

.undo-achievement-row {
  margin-bottom: 3px;
  color: #374151;
}

.undo-achievements-warning {
  margin-top: 12px;
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
}

.undo-achievements-info {
  margin-top: 12px;
  font-size: 13px;
  color: #166534;
  font-style: italic;
}

/* Completion modal achievements summary */
.completion-achievements-box {
  margin: 16px 0 4px;
  padding: 12px 14px;
  background: #f0fdf4;
  border: 1px solid #6ee7b7;
  border-radius: 4px;
  font-size: 14px;
}

.completion-achievements-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: #065f46;
}

.completion-achievement-row {
  margin-bottom: 3px;
  color: #374151;
}

/* Undo modal content area - natural sizing */
#undoConfirmMessage {
  margin: 20px 0 !important;
  line-height: 1.5 !important;
}

/* Fix outer modal wrapper behavior - only when visible */
#undoConfirmModal[style*="display: flex"] {
  align-items: flex-start !important;
}

/* Undo modal - natural sizing, not flexbox */
#undoConfirmModal .modal-content {
  margin: 2% auto !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
}

/* Undo modal button container */
#undoConfirmModal .text-center.mt-20 {
  margin-top: 20px;
}

/* Match Controls Modal - Same Flexbox Layout as Undo Dialog */


/* Two-column layout container */


/* Referee suggestions column */


/* Backside match styling - darker header background */

/* Stats Modal Scrolling Fixes */
#statsModal .modal-content {
  display: flex !important;
  flex-direction: column !important;
  max-height: 80vh !important;
  overflow: hidden !important;
}

#statsModal .modal-content > *:not(:last-child) {
  flex-shrink: 0; /* Keep header and form elements fixed */
}

#statsModal .modal-content > *:last-child {
  flex-shrink: 0; /* Keep button area fixed */
  margin-top: auto; /* Push buttons to bottom */
}

/* Make the scrollable content area for stats */
#statsModal form {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  padding-right: 8px !important; /* Space for scrollbar */
  margin-bottom: 20px !important;
}

/* ==========================================
   NEW FLAT DESIGN STYLES FOR REDESIGNED PAGES
   ========================================== */

/* Form Elements - Only for redesigned pages */

/* ===============================================
   FLAT DESIGN STYLES - ACTIVE (v2.2.0+)
   =============================================== */

/* Registration page - remove fixed heights and internal scrolling */

/* Removed incorrect margin-right that broke the working spacing */

/* Registration Page Styles */

/* Registration Header - Two Column Layout */

/* Column Proportions - Registration Page Only */

/* Registration Page Two-Column Layout */

/* Player List Header */
.player-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  padding: 0 16px;
  border-bottom: 1px solid #e8e8e8;
  background: #f5f5f5;
}

.player-list-header span {
  font-size: 16px;
  font-weight: 600;
  color: #222222;
}

.player-list-header button {
  height: 28px;
  padding: 6px 12px;
  font-size: 12px;
  margin: 0;
}

/* Saved Players Sections */

/* Player List Items */

/* Player Grid */

/* Results Table */

/* Cell styling */

/* Help Info Icon */
.help-info-icon {
  display: inline-block;
  margin-left: 8px;
  font-size: 1.2rem;
  color: #ff6b35;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  position: relative;
  vertical-align: middle;
  user-select: none;
}

.help-info-icon:hover {
  transform: scale(1.15);
  color: #e55a2b;
}

/* Storage Modal Content Styles */
.storage-progress-bar {
  width: 100%;
  height: 24px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0;
}

.storage-progress-fill {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.storage-progress-fill.storage-green {
  background-color: #166534;
}

.storage-progress-fill.storage-yellow {
  background-color: #ca8a04;
}

.storage-progress-fill.storage-amber {
  background-color: #dc2626;
}

.storage-details {
  font-size: 0.95rem;
  color: #374151;
  margin-top: 8px;
}

/* Result QR Preview */
.qr-result-header {
    margin-bottom: 16px;
}
.qr-result-match {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 4px;
}
.qr-result-winner {
    font-size: 18px;
}
.qr-result-legs {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.qr-result-legs th,
.qr-result-legs td {
    border: 1px solid #e5e7eb;
    padding: 6px 10px;
    text-align: left;
}
.qr-result-legs th {
    background: #f3f4f6;
    font-weight: 600;
}
.qr-visits {
    font-family: monospace;
    color: #374151;
}

/* ==========================================================================
   App Mode: Analytics — CSS-driven visibility
   Body class "mode-analytics" set by PHP (Docker) or JS (URL parameter).
   All mode-specific hiding is here. No JavaScript display:none needed.
   ========================================================================== */

/* Hide tournament management nav tabs */
.mode-analytics .nav-btn[data-page="setup"],
.mode-analytics .nav-btn[data-page="registration"],
.mode-analytics .nav-btn[data-page="tournament"] {
    display: none;
}

/* Hide the Chalker link (nav-btn with href, no data-page) */
.mode-analytics .nav-btn[href] {
    display: none;
}

/* Analytics-only mode (Global Settings' own rules are in css/config-page.css) */
.mode-analytics #headerTournamentStatus,
.mode-analytics #headerTournamentStatusNarrow {
    display: none;
}

/* No clock on an analytics-only instance: nobody runs a tournament there (the app header's and the bracket header's) */
.mode-analytics .header-clock,
.mode-analytics .bv-clock {
    display: none;
}

/* Back to Analytics button — hidden in full mode, shown in analytics mode */
.analytics-back-btn {
    display: none;
}
.mode-analytics .analytics-back-btn {
    display: inline-flex;
}

/* Default page — hide Setup in analytics mode, let JS showPage('history') activate Analytics */
.mode-analytics #setup.page {
    display: none;
}

/* Documentation link icons in settings */
.doc-link-icon {
    display: inline-block;
    text-decoration: none;
    font-size: 1.2rem;
    margin-left: 8px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.doc-link-icon:hover {
    transform: scale(1.15);
}

/* Analytics maintenance tools — Export/Import Register, Import Tournament.
   Hidden in analytics-only mode: that deployment gets shared with club members, and
   Import Register overwrites the match history for everyone. The maintainer still
   reaches them on the same instance via ?tm, which forces full mode. */
.mode-analytics .analytics-maintenance-tool {
    display: none;
}