/* ============================================================
   EOS Timing — Material Design 3 (2025 Expressive)
   ============================================================ */

/* --- Color Tokens (Light) --- */
:root {
  --md-primary: #1565C0;
  --md-primary-container: #D2E4FF;
  --md-on-primary: #FFFFFF;
  --md-on-primary-container: #001945;
  --md-secondary: #00658E;
  --md-secondary-container: #C5E7FF;
  --md-on-secondary: #FFFFFF;
  --md-on-secondary-container: #001E2D;
  --md-tertiary: #6B3FA0;
  --md-tertiary-container: #ECDCFF;
  --md-error: #B3261E;
  --md-error-container: #F9DEDC;
  --md-on-error: #FFFFFF;
  --md-surface: #F8F9FF;
  --md-surface-variant: #DFE3F0;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #F1F3FB;
  --md-surface-container: #E9ECFA;
  --md-surface-container-high: #E3E6F7;
  --md-surface-container-highest: #DDE0F2;
  --md-on-surface: #171C2C;
  --md-on-surface-variant: #42496A;
  --md-outline: #737997;
  --md-outline-variant: #C3C7DB;
  --md-scrim: rgba(0, 0, 0, 0.32);
  --md-shadow: rgba(0, 0, 20, 0.15);
  --md-ripple: rgba(21, 101, 192, 0.12);

  /* Heats colors */
  --heat-1: #1565C020;
  --heat-1-border: #1565C0;
  --heat-2: #00658E20;
  --heat-2-border: #00658E;
  --heat-3: #6B3FA020;
  --heat-3-border: #6B3FA0;
  --heat-4: #B3261E20;
  --heat-4-border: #B3261E;
  --heat-5: #2E7D3220;
  --heat-5-border: #2E7D32;
  --heat-6: #E65100_20;
  --heat-6-border: #E65100;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Elevation */
  --elev-1: 0 1px 3px var(--md-shadow), 0 1px 2px rgba(0, 0, 0, 0.10);
  --elev-2: 0 3px 6px var(--md-shadow), 0 2px 4px rgba(0, 0, 0, 0.08);
  --elev-3: 0 6px 16px var(--md-shadow), 0 3px 6px rgba(0, 0, 0, 0.07);

  /* Typography */
  --font-sans: 'Roboto', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  /* Transitions */
  --trans-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
  --trans-std: 250ms cubic-bezier(0.2, 0, 0, 1);
  --trans-slow: 400ms cubic-bezier(0.2, 0, 0, 1);

  --top-bar-height: 64px;
  --footer-height: 40px;
  --editor-header-height: 60px;
  --nav-width: 280px;
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  --md-primary: #A0C4FF;
  --md-primary-container: #003A82;
  --md-on-primary: #002160;
  --md-on-primary-container: #D2E4FF;
  --md-secondary: #7DD3FC;
  --md-secondary-container: #004C6B;
  --md-on-secondary: #003547;
  --md-on-secondary-container: #C5E7FF;
  --md-tertiary: #D0BCFF;
  --md-tertiary-container: #4F277C;
  --md-error: #F2B8B5;
  --md-error-container: #8C1D18;
  --md-on-error: #601410;
  --md-surface: #111420;
  --md-surface-variant: #2D3245;
  --md-surface-container-lowest: #0C0F1A;
  --md-surface-container-low: #171C2C;
  --md-surface-container: #1E2335;
  --md-surface-container-high: #272D40;
  --md-surface-container-highest: #31374C;
  --md-on-surface: #E2E6F8;
  --md-on-surface-variant: #C3C7DB;
  --md-outline: #8D91A7;
  --md-outline-variant: #43476A;
  --md-scrim: rgba(0, 0, 0, 0.55);
  --md-shadow: rgba(0, 0, 40, 0.4);
  --md-ripple: rgba(160, 196, 255, 0.12);

  --heat-1: #A0C4FF18;
  --heat-1-border: #A0C4FF;
  --heat-2: #7DD3FC18;
  --heat-2-border: #7DD3FC;
  --heat-3: #D0BCFF18;
  --heat-3-border: #D0BCFF;
  --heat-4: #F2B8B518;
  --heat-4-border: #F2B8B5;
  --heat-5: #A5D6A718;
  --heat-5-border: #A5D6A7;
  --heat-6: #FFCC8018;
  --heat-6-border: #FFCC80;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--md-surface);
  color: var(--md-on-surface);
  line-height: 1.5;
  transition: background-color var(--trans-std), color var(--trans-std);
  min-height: 100vh;
  overflow-x: hidden;
}

/* --- Auth Screen --- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--md-primary-container) 0%, var(--md-secondary-container) 50%, var(--md-tertiary-container) 100%);
  padding: var(--sp-md);
}

.auth-card {
  background: var(--md-surface-container-lowest);
  border-radius: var(--radius-xl);
  padding: var(--sp-2xl) var(--sp-xl);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--elev-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-lg);
}

.auth-logo {
  width: 72px;
  height: 72px;
  background: var(--md-secondary-container);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--elev-2);
}

.auth-logo .material-icons-round {
  font-size: 36px;
  color: var(--md-on-primary);
}

.auth-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--md-on-surface);
  text-align: center;
  letter-spacing: -0.02em;
}

.auth-subtitle {
  font-size: 0.9rem;
  color: var(--md-on-surface-variant);
  text-align: center;
  margin-top: -12px;
}

/* --- Language Switcher --- */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--md-surface-container);
  border-radius: var(--radius-full);
  padding: 3px;
  border: 1px solid var(--md-outline-variant);
}

.lang-btn {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast);
}

.lang-btn:hover {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}

.lang-btn.active {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.lang-switcher-bar {
  background: transparent;
  border-color: transparent;
  padding: 0;
}

.form-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.form-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  letter-spacing: 0.01em;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 12px;
  color: var(--md-on-surface-variant);
  font-size: 20px;
  pointer-events: none;
  z-index: 1;
}

.form-input {
  width: 100%;
  background: var(--md-surface-container-low);
  border: 1.5px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  padding: 12px 44px 12px 44px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--md-on-surface);
  outline: none;
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}

.form-input.no-icon {
  padding-left: 14px;
}

.settings-tmpl-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
}
.settings-tmpl-label {
  font-size: 0.88rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.settings-tmpl-select {
  padding: 6px 10px !important;
  width: 100%;
}

.form-input.uppercase {
  text-transform: uppercase;
}

.form-input:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px var(--md-ripple);
}

.form-input::placeholder {
  color: var(--md-outline);
}

/* ── Rich text editor ── */
.rich-toolbar {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.rich-btn {
  background: var(--md-surface-container);
  border: 1.5px solid var(--md-outline-variant);
  border-radius: var(--radius-sm);
  padding: 2px 9px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.4;
  color: var(--md-on-surface);
  transition: background var(--trans-fast);
}
.rich-btn:hover { background: var(--md-surface-container-high); }
.rich-editor {
  width: 100%;
  min-height: 52px;
  background: var(--md-surface-container-low);
  border: 1.5px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--md-on-surface);
  outline: none;
  line-height: 1.5;
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.rich-editor:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px var(--md-ripple);
}
.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--md-outline);
  pointer-events: none;
}

.toggle-password {
  position: absolute;
  right: 6px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  transition: background var(--trans-fast), box-shadow var(--trans-fast), transform var(--trans-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn-filled {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--elev-1);
}

.btn-filled:hover {
  box-shadow: var(--elev-2);
  filter: brightness(1.08);
}

.btn-tonal {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.btn-tonal:hover {
  filter: brightness(0.95);
}

.btn-text {
  background: transparent;
  color: var(--md-primary);
  padding: 10px 16px;
}

.btn-text:hover {
  background: var(--md-ripple);
}

.btn-error {
  background: var(--md-error);
  color: var(--md-on-error);
  box-shadow: var(--elev-1);
}

.btn-error:hover {
  box-shadow: var(--elev-2);
  filter: brightness(1.08);
}

.btn-withdraw {
  background: var(--md-outline);
  color: #fff;
  box-shadow: var(--elev-1);
}

.btn-withdraw:hover {
  box-shadow: var(--elev-2);
  filter: brightness(1.08);
}

.btn-wide {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 1rem;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--md-on-surface-variant);
  border: none;
  cursor: pointer;
  transition: background var(--trans-fast);
  flex-shrink: 0;
}

.btn-icon:hover {
  background: var(--md-surface-variant);
}

.btn-icon .material-icons-round {
  font-size: 22px;
}

.error-msg {
  color: var(--md-error);
  font-size: 0.85rem;
  text-align: center;
  padding: 4px 0;
}

/* --- Top App Bar --- */
.top-app-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-bar-height);
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-md);
  z-index: 100;
  box-shadow: var(--elev-1);
  transition: background var(--trans-std);
}

.top-bar-leading {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.top-bar-logo {
  color: var(--md-primary);
  font-size: 28px;
}

.top-bar-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--md-on-surface);
  letter-spacing: -0.01em;
}

.regatta-selector {
  position: relative;
  margin-left: var(--sp-lg);
}

.regatta-selector-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--trans-fast), border-color var(--trans-fast);
}

.regatta-selector-btn:hover {
  background: var(--md-secondary-container);
  border-color: var(--md-outline-variant);
}

.regatta-selector-btn .material-icons-round {
  font-size: 16px;
}

.regatta-chevron {
  transition: transform var(--trans-fast);
}

.regatta-chevron.open {
  transform: rotate(180deg);
}

.regatta-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 320px;
  max-width: 480px;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
  z-index: 200;
  overflow: hidden;
  animation: fadeIn var(--trans-fast);
}

.regatta-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px 16px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--md-on-surface);
  transition: background var(--trans-fast);
}

.regatta-dropdown-item:hover {
  background: var(--md-surface-container);
}

.regatta-dropdown-item.active {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-weight: 600;
}

.regatta-dropdown-item .material-icons-round {
  font-size: 20px;
  color: var(--md-primary);
  flex-shrink: 0;
}

.regatta-dropdown-item.active .material-icons-round {
  color: var(--md-on-primary-container);
}

.regatta-item-info {
  flex: 1;
  min-width: 0;
}

.regatta-item-name {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regatta-item-date {
  display: block;
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
  margin-top: 1px;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--md-surface-container);
  border-radius: var(--radius-full);
  padding: 6px 14px 6px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
}

.user-chip .material-icons-round {
  font-size: 18px;
  color: var(--md-primary);
}

/* --- Sync dropdown --- */
.sync-btn-wrapper {
  position: relative;
}

.sync-btn {
  position: relative;
}

.sync-btn-dot {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--md-surface);
}

.sync-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 385px;
  background: var(--md-surface-container-high);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  z-index: 500;
  overflow: hidden;
}

.sync-dropdown-header {
  padding: 10px 16px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  border-bottom: 1px solid var(--md-outline-variant);
}

.sync-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--md-outline-variant);
}

.sync-item:last-child { border-bottom: none; }

.sync-item-na {
  opacity: 0.45;
  pointer-events: none;
}

.sync-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sync-item-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-on-surface);
}

.sync-item-meta {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync-dropdown-footer {
  padding: 8px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.sync-logs-btn {
  font-size: 0.8rem;
}

/* Status dots */
.sync-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sync-dot-idle    { background: var(--md-outline); }
.sync-dot-syncing { background: #f59e0b; }
.sync-dot-ok      { background: #22c55e; }
.sync-dot-error   { background: #ef4444; }

/* Sync logs modal */
.sync-logs-card {
  width: 720px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.sync-logs-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  font-size: 0.8rem;
}

.sync-logs-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--md-on-surface-variant);
  font-style: italic;
}

.sync-log-row {
  display: grid;
  grid-template-columns: 140px 48px 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 16px;
  border-bottom: 1px solid var(--md-outline-variant);
  font-family: monospace;
}

.sync-log-row:last-child { border-bottom: none; }

.sync-log-time {
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
  white-space: nowrap;
}

.sync-log-type {
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--md-primary);
}

.sync-log-msg { color: var(--md-on-surface); word-break: break-word; }

.sync-log-info  .sync-log-time { color: var(--md-on-surface-variant); }
.sync-log-warn  { background: #fffbeb; }
.sync-log-warn  .sync-log-msg  { color: #b45309; }
.sync-log-error { background: #fef2f2; }
.sync-log-error .sync-log-msg  { color: #b91c1c; }

[data-theme="dark"] .sync-log-warn  { background: #3b2400; }
[data-theme="dark"] .sync-log-warn  .sync-log-msg { color: #fbbf24; }
[data-theme="dark"] .sync-log-error { background: #3b0000; }
[data-theme="dark"] .sync-log-error .sync-log-msg { color: #f87171; }

/* --- PDF Upload Manager --- */
.pdf-manager-window {
  position: fixed;
  top: 72px;
  right: 24px;
  width: 600px;
  min-width: 380px;
  min-height: 260px;
  max-height: 500px;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  z-index: 1200;
  resize: both;
  overflow: hidden;
}

.pdf-manager-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 16px;
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  border-radius: 12px 12px 0 0;
  cursor: move;
  flex-shrink: 0;
  user-select: none;
}

.pdf-manager-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--md-on-surface);
}

.pdf-manager-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
  padding: 0 8px 0 0;
}

.pdf-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  background: none;
  color: var(--md-on-surface-variant);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.pdf-tab .material-icons-round { font-size: 16px; }
.pdf-tab:hover { color: var(--md-on-surface); }
.pdf-tab.active { color: var(--md-primary); border-bottom-color: var(--md-primary); }
.pdf-tab-drafts { }
.pdf-tab-drafts.active { color: var(--md-tertiary, #b39ddb); border-bottom-color: var(--md-tertiary, #b39ddb); }

.pdf-move-select {
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  max-width: 110px;
}
.pdf-move-select:hover { background: var(--md-surface-container-high); }

.pdf-manager-refresh {
  margin-left: auto;
}

.pdf-manager-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.pdf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  color: var(--md-on-surface-variant);
  gap: 8px;
}
.pdf-empty .material-icons-round { font-size: 40px; opacity: 0.4; }

.pdf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--md-outline-variant);
}
.pdf-row:last-child { border-bottom: none; }
.pdf-row:hover { background: var(--md-surface-container-low); }

.pdf-file-icon {
  font-size: 20px;
  color: var(--md-error);
  flex-shrink: 0;
}

.pdf-file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pdf-file-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.pdf-file-name:hover {
  color: var(--md-primary);
  text-decoration: underline;
}

.pdf-file-size {
  font-size: 0.7rem;
  color: var(--md-on-surface-variant);
}

.pdf-file-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.pdf-actions-sep {
  width: 1px;
  height: 18px;
  background: var(--md-outline-variant);
  flex-shrink: 0;
  margin: 0 2px;
}

.pdf-upload-btn {
  font-size: 0.72rem !important;
  padding: 3px 8px !important;
  height: auto !important;
  gap: 3px !important;
}
.pdf-upload-btn .material-icons-round { font-size: 13px; }
.pdf-upload-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Upload status dots */
.pdf-upload-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: help;
}
.pdf-dot-none    { background: var(--md-outline); opacity: 0.5; }
.pdf-dot-ok      { background: #16a34a; }
.pdf-dot-outdated { background: #d97706; }

[data-theme="dark"] .pdf-dot-ok      { background: #4ade80; }
[data-theme="dark"] .pdf-dot-outdated { background: #fbbf24; }

/* --- Command Toolbar --- */
.cmd-toolbar-window {
  position: fixed;
  top: 72px;
  right: 24px;
  width: 320px;
  min-width: 220px;
  max-height: 80vh;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  z-index: 1200;
  resize: horizontal;
  overflow: hidden;
}

.cmd-toolbar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 16px;
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  border-radius: 12px 12px 0 0;
  cursor: move;
  flex-shrink: 0;
  user-select: none;
}

.cmd-toolbar-docked .cmd-toolbar-header {
  cursor: default;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.cmd-toolbar-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--md-on-surface);
}

.cmd-toolbar-body {
  flex: 0 0 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(80vh - 48px);
}

.cmd-section {
  border-bottom: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
}
.cmd-section:last-child { border-bottom: none; }

.cmd-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  background: var(--md-surface-container-low);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.cmd-section-header:hover { background: var(--md-surface-container); }
.cmd-section-header .material-icons-round {
  font-size: 16px;
  color: var(--md-primary);
}
.cmd-section-chevron {
  margin-left: auto;
  font-size: 18px !important;
  color: var(--md-on-surface-variant) !important;
  transition: transform 0.2s ease;
}
.cmd-section.collapsed .cmd-section-chevron { transform: rotate(-90deg); }
.cmd-section.collapsed .cmd-section-content { display: none; }

.cmd-section-content {
  padding: var(--sp-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
}

.cmd-section-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-lg) var(--sp-md);
  color: var(--md-on-surface-variant);
  font-size: 0.85rem;
  opacity: 0.6;
  grid-column: 1 / -1;
}
.cmd-section-placeholder .material-icons-round { font-size: 18px; }

.cmd-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
  min-height: 60px;
}
.cmd-action-btn:hover { background: var(--md-surface-container-high); }
.cmd-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cmd-action-btn .material-icons-round { font-size: 22px; color: var(--md-primary); }
.cmd-action-btn:disabled .material-icons-round { color: var(--md-on-surface-variant); }
.cmd-action-btn-sm { min-height: 48px; padding: 6px 6px; font-size: 0.72rem; }
.cmd-action-btn-sm .material-icons-round { font-size: 18px; }
.cmd-sl-btn-row { display: flex; gap: 6px; grid-column: 1 / -1; }
.cmd-sl-btn-row .cmd-action-btn { flex: 1; }

.cmd-compound-btn {
  grid-column: 1 / -1;
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-md);
  background: var(--md-surface-container);
  overflow: hidden;
  cursor: pointer;
  transition: background 0.15s;
  color: var(--md-on-surface);
  font-size: 0.85rem;
  font-weight: 500;
}
.cmd-compound-btn:hover { background: var(--md-surface-container-high); }
.cmd-compound-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px 12px;
}
.cmd-compound-main .material-icons-round { font-size: 18px; color: var(--md-primary); flex-shrink: 0; }
.cmd-compound-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 12px;
  border-left: 1px solid var(--md-outline-variant);
  font-size: 0.7rem;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.cmd-compound-opt input[type="checkbox"] {
  accent-color: var(--md-primary);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.cmd-toggle-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.cmd-toggle-row:hover { background: var(--md-surface-container-high); }
.cmd-toggle-row-sub { display: none; padding-left: inherit; }
.cmd-section-content:has(#cmd-initial-draw-toggle:checked) .cmd-toggle-row-sub { display: flex; }
.cmd-toggle-row:has(input:checked) { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.cmd-toggle-row:has(input:checked):hover { background: var(--md-primary-container); filter: brightness(0.95); }
.cmd-toggle-row .material-icons-round { font-size: 18px; color: var(--md-primary); flex-shrink: 0; }
.cmd-toggle-row:has(input:checked) .material-icons-round { color: var(--md-on-primary-container); }
.cmd-toggle-label { flex: 1; }
.cmd-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.cmd-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cmd-toggle-switch .toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 20px;
}
.cmd-toggle-switch .toggle-slider::before {
  width: 10px;
  height: 10px;
  bottom: 3px;
  left: 3px;
}
.cmd-toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

/* Active state for the toolbar button */
#cmd-toolbar-btn.active { color: var(--md-primary); }

/* ── Start List section in command toolbar ── */
.cmd-sl-content { grid-template-columns: 1fr; gap: 6px; }

.cmd-sl-modes {
  display: flex;
  gap: 4px;
}
.cmd-sl-mode-btn {
  flex: 1;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 5px 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cmd-sl-mode-btn:hover { background: var(--md-surface-container-high); color: var(--md-on-surface); }
.cmd-sl-mode-btn.active { background: var(--md-primary-container); color: var(--md-on-primary-container); }

.cmd-sl-range {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--md-on-surface-variant);
}
.cmd-sl-num {
  width: 52px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-size: 0.82rem;
  padding: 3px 6px;
  text-align: center;
}

.cmd-sl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 110px;
  overflow-y: auto;
  padding: 6px;
  background: var(--md-surface-container-lowest);
  border-radius: var(--radius-sm);
  border: 1px solid var(--md-outline-variant);
}
.cmd-sl-chip {
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface-variant);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  user-select: none;
}
.cmd-sl-chip:hover { background: var(--md-surface-container-high); color: var(--md-on-surface); }
.cmd-sl-chip.selected { background: var(--md-primary-container); border-color: var(--md-primary); color: var(--md-on-primary-container); }
.cmd-sl-chips-empty { font-size: 0.75rem; color: var(--md-on-surface-variant); padding: 4px; opacity: 0.7; }

/* ── Timetable report compound block ── */

/* --- Navigation Drawer --- */
.nav-drawer {
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  bottom: 0;
  width: var(--nav-width);
  background: var(--md-surface-container-low);
  border-right: 1px solid var(--md-outline-variant);
  display: flex;
  flex-direction: column;
  z-index: 90;
  transform: translateX(-100%);
  transition: transform var(--trans-std);
  overflow-y: auto;
}

.nav-drawer.open {
  transform: translateX(0);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--md-scrim);
  z-index: 85;
  backdrop-filter: blur(1px);
}

.nav-header {
  padding: var(--sp-lg) var(--sp-md) var(--sp-sm);
}

.nav-header-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.nav-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--sp-sm);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 12px var(--sp-md);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast);
  text-align: left;
}

.nav-item:hover {
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}

.nav-item.active {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-weight: 600;
}

.nav-item .material-icons-round {
  font-size: 22px;
}

.nav-separator {
  height: 1px;
  background: var(--md-outline-variant);
  margin: var(--sp-xs) var(--sp-sm);
}

.nav-item-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-item-group .nav-item-expand {
  flex: 1;
  min-width: 0;
}

.nav-item-group .nav-item-icon {
  flex-shrink: 0;
  padding: 10px;
}

body:not([data-role="admin"]) .nav-item-icon { display: none !important; }

.weighin-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  height: 40vh;
  color: var(--md-outline);
}

.weighin-placeholder .material-icons-round {
  font-size: 64px;
}

#view-weighin-settings {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--top-bar-height) - var(--footer-height) - 2 * var(--sp-lg));
}

#view-weighin-settings .view-header {
  margin-bottom: var(--sp-sm);
  flex-shrink: 0;
}

#view-weighin-settings.hidden { display: none; }

.weighin-settings-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  gap: var(--sp-md);
  overflow: hidden;
}

.weighin-left-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: var(--sp-md);
}

.weighin-time-card {
  flex-shrink: 0;
}

.wt-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--md-surface);
}

.wt-editor-body {
  padding: var(--sp-md) var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  overflow-y: auto;
}

.settings-unit-label {
  font-size: 0.85rem;
  color: var(--md-on-surface-variant);
}

.form-field-hint {
  display: block;
  font-size: 0.8rem;
  color: var(--md-outline);
  margin-bottom: var(--sp-xs);
}

.wt-delete-btn.hidden { display: none !important; }

.wt-events-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 480px;
  max-width: 480px;
  min-height: 0;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--md-surface);
}

.wt-events-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md);
  border-bottom: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
  background: var(--md-surface-container-low);
}

.wt-events-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--md-on-surface);
}

.wt-events-list {
  flex: 1;
  overflow-y: auto;
}

.wt-event-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--md-outline-variant);
}

.wt-event-row:last-child { border-bottom: none; }

.wt-event-no {
  flex-shrink: 0;
  width: 36px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
}

.wt-event-name {
  flex: 1;
  font-size: 0.9rem;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wt-event-tpl-select {
  flex-shrink: 0;
  width: 190px;
  padding: 6px 10px !important;
}

.wt-events-empty {
  padding: var(--sp-lg);
  text-align: center;
  color: var(--md-outline);
  font-size: 0.9rem;
}

.wt-event-cox-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-primary);
  background: var(--md-primary-container);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  white-space: nowrap;
}

.wt-event-row-coxed {
  background: color-mix(in srgb, var(--md-primary-container) 20%, transparent);
}

/* --- Main Content --- */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  padding: calc(var(--top-bar-height) + var(--sp-lg)) var(--sp-lg) var(--sp-lg);
  flex: 1;
  width: 100%;
}

.app-footer {
  background-color: #01899f;
  color: #ffffff;
  padding: var(--sp-sm) var(--sp-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 10;
}

.footer-logo {
  height: 24px;
  object-fit: contain;
}

.view {
  display: block;
}

.view.hidden {
  display: none;
}

.view-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin-bottom: var(--sp-xl);
  position: sticky;
  top: var(--top-bar-height);
  z-index: 20;
  background: var(--md-surface);
  padding-top: var(--sp-sm);
  padding-bottom: var(--sp-sm);
  margin-top: calc(-1 * var(--sp-sm));
}

.view-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--md-on-surface);
  letter-spacing: -0.02em;
  flex: 1;
  min-width: 200px;
}

/* --- Preliminary Timetable Widget --- */
.prelim-timetable-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.prelim-timetable-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}

.prelim-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  white-space: nowrap;
}

.prelim-status-chip .material-icons-round { font-size: 14px; }

.prelim-status-loaded {
  color: #2e7d32;
  background: #e8f5e9;
}

.prelim-status-loaded .material-icons-round { color: #2e7d32; }

.prelim-status-not-loaded {
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-high);
}

.prelim-status-not-loaded .material-icons-round { color: var(--md-on-surface-variant); }

/* --- Classes Grid --- */
.classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-md);
}

.class-card {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  cursor: pointer;
  transition: box-shadow var(--trans-fast), transform var(--trans-fast), background var(--trans-fast);
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.class-card:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-2px);
  background: var(--md-surface-container);
}

.class-card:active {
  transform: translateY(0);
}

.class-card-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
}

.class-card-info {
  flex: 1;
  min-width: 0;
}

.class-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.class-card-count {
  font-size: 0.82rem;
  color: var(--md-on-surface-variant);
  margin-top: 2px;
}

.class-card .material-icons-round {
  color: var(--md-outline);
  font-size: 20px;
}

.class-card.card-selected {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
}

.class-card.card-selected .class-card-badge {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.class-card-checkbox {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.class-card-checkbox .material-icons-round {
  font-size: 22px;
  color: var(--md-primary);
}

.class-card-progression {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-primary);
  margin-top: 3px;
}

.class-card-progression .material-icons-round {
  font-size: 13px;
  color: var(--md-primary);
}

.class-card-progression.hidden {
  display: none;
}

/* --- Progression Group (view-header) --- */
.progression-group {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  padding: 4px 4px 4px 8px;
  background: var(--md-surface-container-low);
}

.progression-group-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-on-surface);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--trans-fast);
}

.progression-group-toggle:hover {
  background: var(--md-surface-container);
}

.progression-group-toggle .material-icons-round {
  font-size: 18px;
  color: var(--md-primary);
}

.progression-group-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.progression-select {
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-size: 0.875rem;
  cursor: pointer;
}

.progression-group-divider {
  width: 1px;
  height: 24px;
  background: var(--md-outline-variant);
  flex-shrink: 0;
}

.generate-races-modal-card {
  max-width: 480px;
}

.generate-races-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff3e0;
  border: 1px solid #ffb300;
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  margin-bottom: var(--sp-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: #7f4e00;
}

.generate-races-warning .material-icons-round {
  color: #ffb300;
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

[data-theme="dark"] .generate-races-warning {
  background: #3d2c00;
  border-color: #ffb300;
  color: #ffd54f;
}

[data-theme="dark"] .generate-races-warning .material-icons-round {
  color: #ffb300;
}

/* --- Editor Header --- */
.editor-header {
  align-items: flex-start;
}

.btn-back {
  margin-right: var(--sp-xs);
  flex-shrink: 0;
}

.editor-title-group {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex: 1;
  min-width: 0;
}

.editor-class-badge {
  min-width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--md-primary);
  color: var(--md-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  padding: 0 8px;
  flex-shrink: 0;
}

.editor-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.editor-distance-widget {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-top: 5px;
}

.editor-distance-icon {
  position: absolute;
  left: 10px;
  color: var(--md-on-surface-variant);
  font-size: 20px;
  pointer-events: none;
  padding: 10px;
}

.editor-distance-field {
  background: var(--md-surface-container);
  border: 1.5px solid var(--md-outline-variant);
  border-radius: var(--radius-full);
  padding: 8px 30px 8px 38px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--md-on-surface);
  outline: none;
  width: 110px;
  text-align: right;
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
  -moz-appearance: textfield;
}

.editor-distance-field::-webkit-inner-spin-button,
.editor-distance-field::-webkit-outer-spin-button {
  display: none;
}

.editor-distance-field:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px var(--md-ripple);
}

.editor-distance-unit {
  position: absolute;
  right: 12px;
  font-size: 0.85rem;
  color: var(--md-on-surface-variant);
  pointer-events: none;
}

/* --- Search Box --- */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 10px;
  color: var(--md-on-surface-variant);
  font-size: 20px;
  pointer-events: none;
  padding: 10px;
}

.search-input {
  background: var(--md-surface-container);
  border: 1.5px solid var(--md-outline-variant);
  border-radius: var(--radius-full);
  padding: 8px 36px 8px 38px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--md-on-surface);
  outline: none;
  width: 240px;
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}

.search-input:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px var(--md-ripple);
}

.search-clear {
  position: absolute;
  right: 4px;
}

/* --- Editor body / sidebar --- */
.editor-body {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-start;
}

.editor-main {
  flex: 1;
  min-width: 0;
}

.editor-sidebar {
  width: 210px;
  flex-shrink: 0;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: calc(var(--top-bar-height) + var(--editor-header-height) + var(--sp-sm));
  max-height: calc(100vh - var(--top-bar-height) - var(--editor-header-height) - var(--footer-height) - var(--sp-xl));
  overflow-y: auto;
}

.editor-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--md-outline-variant);
  cursor: pointer;
  text-align: left;
  color: var(--md-on-surface);
  transition: background 0.15s;
}

.editor-sidebar-item:last-child {
  border-bottom: none;
}

.editor-sidebar-item:hover {
  background: var(--md-surface-container);
}

.editor-sidebar-item.active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.editor-sidebar-badge {
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  border-radius: 4px;
  padding: 2px 5px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.editor-sidebar-item.active .editor-sidebar-badge {
  background: var(--md-secondary);
  color: var(--md-on-secondary);
}

.editor-sidebar-name {
  font-size: 0.78rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.editor-sidebar-draw-done {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--md-primary);
  opacity: 0.85;
}
.editor-sidebar-draw-done .material-icons-round {
  font-size: 16px;
}

/* --- Entries List --- */
.entries-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Heat divider */
.heat-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0 var(--sp-xs);
  position: sticky;
  top: calc(var(--top-bar-height) + 4px);
  z-index: 10;
}

.heat-divider-line {
  flex: 1;
  height: 2px;
  border-radius: 1px;
}

.heat-divider-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Entry card */
.entry-card {
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--sp-md) var(--sp-lg);
  margin-bottom: var(--sp-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  transition: box-shadow var(--trans-fast), border-color var(--trans-fast), background var(--trans-fast);
  cursor: default;
}

.entry-card:hover {
  box-shadow: var(--elev-1);
}

.entry-card.highlighted {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
  box-shadow: 0 0 0 2px var(--md-primary);
}

.entry-card.dragging {
  opacity: 0.6;
  box-shadow: var(--elev-3);
  cursor: grabbing;
}

.entry-card.drag-insert-before {
  box-shadow: 0 -3px 0 var(--md-primary);
}
.entry-card.drag-insert-after {
  box-shadow: 0 3px 0 var(--md-primary);
}
.entry-card.drag-swap {
  border-color: var(--md-secondary);
  background: var(--md-secondary-container);
}

.entry-drag-handle {
  cursor: grab;
  color: var(--md-outline);
  flex-shrink: 0;
  touch-action: none;
}

.entry-drag-handle:active {
  cursor: grabbing;
}

.entry-drag-handle .material-icons-round {
  font-size: 20px;
}

.entry-number-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.entry-number-display {
  min-width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--trans-fast);
  user-select: none;
  padding: 0 var(--sp-sm);
}

.entry-number-display:hover {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.entry-number-display.entry-number-locked {
  cursor: default;
}

.entry-number-display.entry-number-locked:hover {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.entry-number-input {
  width: 64px;
  text-align: center;
  background: var(--md-surface-container-low);
  border: 2px solid var(--md-primary);
  border-radius: var(--radius-md);
  padding: 8px 4px;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--md-on-surface);
  outline: none;
  display: none;
}

.entry-info {
  flex: 1;
  min-width: 0;
}

.entry-team {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-athletes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-sm);
  margin-top: 3px;
}

.entry-athlete-tag {
  font-size: 0.8rem;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.entry-trainer {
  font-size: 0.8rem;
  color: var(--md-on-surface-variant);
  margin-top: 3px;
}

.entry-trainer .material-icons-round {
  font-size: 14px;
  vertical-align: middle;
}

.entry-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* --- Late Entry Badge --- */
.entry-late-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--md-tertiary-container);
  color: var(--md-tertiary);
  white-space: nowrap;
  margin-right: 6px;
  flex-shrink: 0;
}

.entry-late-badge .material-icons-round {
  font-size: 13px;
}

/* --- Withdrawn Entry --- */
.entry-card.entry-withdrawn {
  opacity: 0.55;
  background: var(--md-surface-container);
  border-color: var(--md-outline-variant);
  border-left-color: var(--md-outline) !important;
}

.entry-card.entry-withdrawn .entry-team {
  text-decoration: line-through;
  color: var(--md-on-surface-variant);
}

.entry-card.entry-withdrawn .entry-number-display {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
}

.entry-card.entry-withdrawn .entry-number-display:hover {
  background: var(--md-outline);
  color: #fff;
}

.entry-card.entry-withdrawn .entry-athlete-tag {
  opacity: 0.6;
}

.entry-card.entry-withdrawn .entry-trainer {
  opacity: 0.6;
}

.entry-withdrawn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--md-surface-container-high);
  color: var(--md-outline);
  white-space: nowrap;
  margin-right: 6px;
  flex-shrink: 0;
  border: 1px solid var(--md-outline-variant);
}

.entry-withdrawn-badge .material-icons-round {
  font-size: 13px;
}

/* --- Toggle Switch --- */
.late-entry-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--md-surface-container);
  border-radius: var(--radius-md);
  border: 1px solid var(--md-outline-variant);
}

.toggle-label-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toggle-label-text {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--md-on-surface);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--md-surface-container-highest);
  border: 2px solid var(--md-outline);
  border-radius: 12px;
  transition: background var(--trans-fast), border-color var(--trans-fast);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: var(--md-outline);
  border-radius: 50%;
  transition: transform var(--trans-fast), background var(--trans-fast), width var(--trans-fast), height var(--trans-fast);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--md-tertiary);
  border-color: var(--md-tertiary);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
  background: #fff;
  width: 18px;
  height: 18px;
  bottom: 1px;
}

.btn-icon.btn-restore {
  color: #2E7D32;
}

[data-theme="dark"] .btn-icon.btn-restore {
  color: #A5D6A7;
}

/* --- Logs Table --- */
.logs-table-wrapper {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
}

.logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.logs-table th {
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px var(--sp-md);
  text-align: left;
  border-bottom: 1px solid var(--md-outline-variant);
}

.logs-table td {
  padding: 12px var(--sp-md);
  color: var(--md-on-surface);
  border-bottom: 1px solid var(--md-outline-variant);
  vertical-align: middle;
}

.logs-table tr:last-child td {
  border-bottom: none;
}

.logs-table tr:hover td {
  background: var(--md-surface-container);
}

.log-ts {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}

.log-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.action-login {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.action-save {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.action-delete {
  background: var(--md-error-container);
  color: var(--md-error);
}

.action-add {
  background: #D4EDDA;
  color: #155724;
}

[data-theme="dark"] .action-add {
  background: #1B4332;
  color: #A3DFB8;
}

.action-shuffle {
  background: var(--md-tertiary-container);
  color: var(--md-tertiary);
}

.action-edit {
  background: #FFF3CD;
  color: #856404;
}

[data-theme="dark"] .action-edit {
  background: #3D2E00;
  color: #FFE47A;
}

/* --- Modals --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--md-scrim);
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-md);
  backdrop-filter: blur(4px);
  animation: fadeIn var(--trans-std);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-card {
  background: var(--md-surface-container-lowest);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 740px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--elev-3);
  animation: slideUp var(--trans-std);
  overflow: hidden;
}

@keyframes slideUp {
  from {
    transform: translateY(20px) scale(0.97);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.confirm-modal-card {
  max-width: 400px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-lg) var(--sp-lg) var(--sp-md);
  border-bottom: 1px solid var(--md-outline-variant);
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--md-on-surface);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.modal-tab-strip {
  display: flex;
  gap: 4px;
  padding: 8px 16px 0;
  border-bottom: 1px solid var(--md-outline-variant);
}

.modal-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--md-on-surface-variant);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--trans-fast), border-color var(--trans-fast), background var(--trans-fast);
  margin-bottom: -1px;
}

.modal-tab:hover {
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}

.modal-tab.active {
  color: var(--md-primary);
  border-bottom-color: var(--md-primary);
}

.modal-tab .material-icons-round {
  font-size: 18px;
}

.timing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-md);
}

.form-input-mono {
  font-family: monospace;
  letter-spacing: 0.03em;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
  border-top: 1px solid var(--md-outline-variant);
}

.confirm-icon-row {
  display: flex;
  justify-content: center;
}

.confirm-icon {
  font-size: 56px;
  color: var(--md-error);
}

.confirm-text {
  text-align: center;
  color: var(--md-on-surface);
  font-size: 0.95rem;
}

.pdf-delete-remote-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  justify-content: center;
}

.pdf-delete-remote-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--md-error);
}

.pdf-delete-btn {
  color: var(--md-error) !important;
}

.pdf-delete-btn:hover {
  background: var(--md-error-container, #fdecea) !important;
}

/* Athlete grid (modal) */
.athletes-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.athletes-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* grid: drag | num | lastname | firstname | year | id | del */
.athlete-col-headers {
  display: grid;
  grid-template-columns: 20px 24px 1fr 1fr 80px 1fr 28px;
  gap: 6px;
  padding: 0 2px 2px;
}

/* Entry modal: drag + num + lastname + firstname + year + id */
#athletes-col-headers-entry {
  grid-template-columns: 20px 24px 2fr 1fr 80px 1fr;
}

#athletes-col-headers-entry.athlete-col-headers--has-club {
  grid-template-columns: 20px 24px 2fr 1fr 1fr 80px 1fr;
}

#athletes-col-headers-entry.athlete-col-headers--has-dob {
  grid-template-columns: 20px 24px 2fr 1fr 110px 1fr;
}

#athletes-col-headers-entry.athlete-col-headers--has-club.athlete-col-headers--has-dob {
  grid-template-columns: 20px 24px 2fr 1fr 1fr 110px 1fr;
}

.athlete-col-headers.athlete-col-headers--has-club {
  grid-template-columns: 20px 24px 1fr 1fr 1fr 80px 1fr 28px;
}

/* Events mode — DoB variant (wider date column, no entry-modal rows) */
#athletes-col-headers-evt.athlete-col-headers--has-dob {
  grid-template-columns: 20px 24px 1fr 1fr 110px 1fr 28px;
}

#athletes-col-headers-evt.athlete-col-headers--has-club.athlete-col-headers--has-dob {
  grid-template-columns: 20px 24px 1fr 1fr 1fr 110px 1fr 28px;
}

.athlete-grid-row.evt-ath-row.athlete-grid-row--has-dob {
  grid-template-columns: 20px 24px 1fr 1fr 110px 1fr 28px;
}

.athlete-grid-row.evt-ath-row.athlete-grid-row--has-club.athlete-grid-row--has-dob {
  grid-template-columns: 20px 24px 1fr 1fr 1fr 110px 1fr 28px;
}

.ach-num {
  min-width: 0;
}

.ach-col {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-primary);
  padding-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ach-year {
  font-size: 0.75rem;
}

.athlete-grid-row {
  display: grid;
  grid-template-columns: 20px 24px 1fr 1fr 80px 1fr 28px;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}

/* Entry-modal rows: drag + num + lastname + firstname + year + id */
.athlete-grid-row.athlete-grid-row--entry {
  grid-template-columns: 20px 24px 2fr 1fr 80px 1fr;
}

/* Club column variant — entry modal */
.athlete-grid-row.athlete-grid-row--entry.athlete-grid-row--has-club {
  grid-template-columns: 20px 24px 2fr 1fr 1fr 80px 1fr;
}

/* DoB variant — entry modal (wider date column) */
.athlete-grid-row.athlete-grid-row--entry.athlete-grid-row--has-dob {
  grid-template-columns: 20px 24px 2fr 1fr 110px 1fr;
}

.athlete-grid-row.athlete-grid-row--entry.athlete-grid-row--has-club.athlete-grid-row--has-dob {
  grid-template-columns: 20px 24px 2fr 1fr 1fr 110px 1fr;
}

/* Club column variant — events mode (drag + num + lastname + firstname + club + year + id + del) */
.athlete-grid-row.athlete-grid-row--has-club:not(.athlete-grid-row--entry) {
  grid-template-columns: 20px 24px 1fr 1fr 1fr 80px 1fr 28px;
}

.athlete-grid-row.ath-drag-over {
  background: var(--md-secondary-container);
  outline: 2px dashed var(--md-secondary);
}

.athlete-grid-row.ath-dragging {
  opacity: 0.4;
}

.athlete-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--md-outline);
}

.athlete-drag-handle .material-icons-round {
  font-size: 18px;
}

.athlete-drag-handle:active {
  cursor: grabbing;
}

.athlete-row-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--md-on-surface-variant);
  text-align: right;
  padding-right: 2px;
}

.athlete-del-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ath-del-btn {
  color: var(--md-error) !important;
}

.ath-del-btn:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.ath-add-btn {
  color: var(--md-primary) !important;
  margin-left: auto;
}

.athlete-field {
  display: flex;
  flex-direction: column;
}

.athlete-field .form-input {
  padding: 9px 10px;
  font-size: 0.88rem;
}

.athlete-field .form-input.uppercase {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Modal two-column row */
.modal-row-two {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-end;
}

.modal-row-two .form-field {
  flex: 1;
}

/* --- Toast --- */
.toast {
  position: fixed;
  bottom: var(--sp-xl);
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  border-radius: var(--radius-full);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--elev-3);
  z-index: 300;
  border: 1px solid var(--md-outline-variant);
  animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.toast.hidden {
  display: none;
}

.toast .material-icons-round {
  font-size: 20px;
}

.toast-success .material-icons-round {
  color: #2E7D32;
}

.toast-error .material-icons-round {
  color: var(--md-error);
}

/* --- Utilities --- */
.hidden {
  display: none !important;
}

/* --- Responsive --- */
@media (max-width: 680px) {
  .top-bar-title {
    display: none;
  }
  
  .regatta-selector {
    display: none;
  }

  .lang-switcher-bar .lang-btn {
    padding: 4px 7px;
    font-size: 0.72rem;
  }

  .search-input {
    width: 140px;
  }

  .editor-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .editor-actions {
    width: 100%;
  }

  .btn-back {
    align-self: flex-start;
  }

  .user-chip span:last-child {
    display: none;
  }

  .main-content {
    padding: var(--sp-md);
  }

  .athlete-grid-row,
  .athlete-col-headers {
    grid-template-columns: 20px 20px 1fr 1fr 28px;
  }

  .athlete-grid-row.athlete-grid-row--entry {
    grid-template-columns: 20px 20px 2fr 1fr 80px;
  }

  .athlete-grid-row.athlete-grid-row--entry.athlete-grid-row--has-club {
    grid-template-columns: 20px 20px 2fr 1fr 1fr 80px;
  }

  /* Keep year/dob visible, hide id (child 6) on mobile entry rows */
  .athlete-grid-row.athlete-grid-row--entry > :nth-child(5) {
    display: flex;
  }
  .athlete-grid-row.athlete-grid-row--entry > :nth-child(6) {
    display: none;
  }

  .athlete-grid-row.athlete-grid-row--has-club:not(.athlete-grid-row--entry) {
    grid-template-columns: 20px 20px 1fr 1fr 1fr 28px;
  }

  #athletes-col-headers-entry {
    grid-template-columns: 20px 20px 2fr 1fr 80px;
  }

  #athletes-col-headers-entry.athlete-col-headers--has-club {
    grid-template-columns: 20px 20px 2fr 1fr 1fr 80px;
  }

  /* Keep year/dob header visible, hide id header on mobile */
  #athletes-col-headers-entry > :nth-child(5) {
    display: block;
  }
  #athletes-col-headers-entry > :nth-child(6) {
    display: none;
  }

  .athlete-col-headers.athlete-col-headers--has-club {
    grid-template-columns: 20px 20px 1fr 1fr 1fr 28px;
  }

  /* hide year and id columns on mobile (child 5 and 6) */
  .athlete-col-headers > :nth-child(5),
  .athlete-col-headers > :nth-child(6),
  .athlete-grid-row > :nth-child(5),
  .athlete-grid-row > :nth-child(6) {
    display: none;
  }

  .modal-row-two {
    flex-direction: column;
  }
}

/* Heat colors (1–6) */
.heat-divider[data-heat="1"] .heat-divider-line {
  background: var(--heat-1-border);
}

.heat-divider[data-heat="1"] .heat-divider-label {
  background: var(--heat-1);
  color: var(--heat-1-border);
  border: 1px solid var(--heat-1-border);
}

.heat-divider[data-heat="2"] .heat-divider-line {
  background: var(--heat-2-border);
}

.heat-divider[data-heat="2"] .heat-divider-label {
  background: var(--heat-2);
  color: var(--heat-2-border);
  border: 1px solid var(--heat-2-border);
}

.heat-divider[data-heat="3"] .heat-divider-line {
  background: var(--heat-3-border);
}

.heat-divider[data-heat="3"] .heat-divider-label {
  background: var(--heat-3);
  color: var(--heat-3-border);
  border: 1px solid var(--heat-3-border);
}

.heat-divider[data-heat="4"] .heat-divider-line {
  background: var(--heat-4-border);
}

.heat-divider[data-heat="4"] .heat-divider-label {
  background: var(--heat-4);
  color: var(--heat-4-border);
  border: 1px solid var(--heat-4-border);
}

.heat-divider[data-heat="5"] .heat-divider-line {
  background: var(--heat-5-border);
}

.heat-divider[data-heat="5"] .heat-divider-label {
  background: var(--heat-5);
  color: var(--heat-5-border);
  border: 1px solid var(--heat-5-border);
}

.heat-divider[data-heat="6"] .heat-divider-line {
  background: var(--heat-6-border);
}

.heat-divider[data-heat="6"] .heat-divider-label {
  background: var(--heat-6);
  color: var(--heat-6-border);
  border: 1px solid var(--heat-6-border);
}

/* Lane count badge colors match their heat */
.heat-1-card {
  border-left: 4px solid var(--heat-1-border) !important;
}

.heat-2-card {
  border-left: 4px solid var(--heat-2-border) !important;
}

.heat-3-card {
  border-left: 4px solid var(--heat-3-border) !important;
}

.heat-4-card {
  border-left: 4px solid var(--heat-4-border) !important;
}

.heat-5-card {
  border-left: 4px solid var(--heat-5-border) !important;
}

.heat-6-card {
  border-left: 4px solid var(--heat-6-border) !important;
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--md-surface-container) 25%, var(--md-surface-container-high) 50%, var(--md-surface-container) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-card {
  height: 80px;
  margin-bottom: var(--sp-sm);
}

/* ---- Events Mode — Race groups ---- */
.race-group {
  margin-bottom: var(--sp-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--md-outline-variant);
}

.race-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: 10px var(--sp-md);
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  flex-wrap: wrap;
}

.race-group-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  min-width: 0;
}

.race-group-header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  flex-shrink: 0;
}

.add-race-row {
  display: flex;
  justify-content: center;
  padding: var(--sp-lg) 0 var(--sp-md);
}

.add-race-btn {
  gap: var(--sp-sm);
}

.race-edit-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
}

.race-badge {
  background: var(--md-primary);
  color: var(--md-on-primary);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.race-meta {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.race-status-icon {
  font-size: 18px !important;
  flex-shrink: 0;
}

.race-crew-count {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}

.btn-sm {
  padding: 4px 10px !important;
  font-size: 0.8125rem !important;
  min-height: unset !important;
}

/* ---- Events Mode — Horizontal lane strip ---- */
.race-lanes-strip {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 10px var(--sp-md) 14px;
  overflow-x: auto;
  background: var(--md-surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  scrollbar-width: thin;
}

.lane-card {
  flex: 0 0 150px;
  min-height: 118px;
  background: var(--md-surface-container);
  border-radius: var(--radius-md);
  border: 1px solid var(--md-outline-variant);
  display: flex;
  flex-direction: column;
  cursor: grab;
  transition: box-shadow .15s, border-color .15s, opacity .15s;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.lane-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--md-outline);
}

.lane-card.evt-dragging {
  opacity: 0.35;
  cursor: grabbing;
}

.lane-card.evt-drag-over {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 2px var(--md-primary);
  background: var(--md-primary-container);
}

.lane-card.lane-card-withdrawn {
  opacity: 0.6;
  background: var(--md-surface-container-lowest);
}

.lane-card-top {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 3px;
}

.lane-card-body {
  flex: 1;
  padding: 0 8px 4px;
  min-width: 0;
}

.lane-card-team {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-on-surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.3;
}

.lane-card-athlete {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.lane-card-athlete--dupe {
  color: var(--md-error) !important;
  font-weight: 600;
}

.lane-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 3px;
}

.lane-card-badges .entry-withdrawn-badge,
.lane-card-badges .entry-late-badge {
  font-size: 0.65rem;
  padding: 1px 4px;
}

.lane-card-badges .entry-withdrawn-badge .material-icons-round,
.lane-card-badges .entry-late-badge .material-icons-round {
  font-size: 10px;
}

.lane-card-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2px 2px 3px;
  border-top: 1px solid var(--md-outline-variant);
  opacity: 0;
  transition: opacity .15s;
}

.lane-card:hover .lane-card-actions {
  opacity: 1;
}

.btn-icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--md-on-surface-variant);
  transition: background .15s, color .15s;
  padding: 0;
}

.btn-icon-sm:hover {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}

.btn-icon-sm .material-icons-round { font-size: 15px; }

/* ---- Events Mode — Empty lane slots ---- */
.empty-lane-slot {
  flex: 0 0 62px;
  min-height: 118px;
  background: var(--md-surface-container-lowest);
  border-radius: var(--radius-md);
  border: 2px dashed var(--md-outline-variant);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  color: var(--md-on-surface-variant);
  opacity: 0.6;
}

.empty-lane-slot:hover {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
  color: var(--md-primary);
  opacity: 1;
}

.empty-lane-slot.evt-drag-over {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 2px var(--md-primary);
  background: var(--md-primary-container);
  color: var(--md-primary);
  opacity: 1;
}

.empty-slot-lane-no {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.empty-slot-add-icon { font-size: 16px !important; opacity: 0.7; }

/* ---- Events Mode — Drag hint bar ---- */
.events-drag-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--sp-sm);
  padding: 6px 12px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.events-drag-hint .material-icons-round { font-size: 15px; opacity: 0.75; }

/* ---- Events Mode — Lane rows (kept for possible fallback) ---- */
.event-lane-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px var(--sp-md);
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background .15s;
}

.event-lane-row:last-child { border-bottom: none; }

.event-lane-row:hover { background: var(--md-surface-container-low); }

.event-lane-row.event-lane-withdrawn {
  opacity: .65;
  background: var(--md-surface-container-lowest);
}

.event-lane-row.highlighted { background: var(--md-secondary-container) !important; }

.lane-card.highlighted { outline: 2px solid var(--md-secondary); background: var(--md-secondary-container) !important; }

.event-lane-pos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  min-width: 44px;
}

.lane-no-badge {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 1px 7px;
  white-space: nowrap;
}

.bow-no-badge {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 6px;
  white-space: nowrap;
}

.event-lane-info {
  flex: 1;
  min-width: 0;
}

.event-lane-team {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.9375rem;
  margin-bottom: 3px;
}

.event-lane-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* ---- Transfer modal ---- */
.radio-group {
  display: flex;
  gap: var(--sp-md);
  align-items: center;
  padding: 4px 0;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--md-on-surface);
}

.radio-option input[type="radio"] { accent-color: var(--md-primary); }

.transfer-source-info {
  background: var(--md-surface-container);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
  border: 1px solid var(--md-outline-variant);
}

/* ---- Settings View ---- */
.settings-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-lg);
  align-items: start;
  padding: var(--sp-md);
}

.settings-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  min-width: 0;
}

@media (max-width: 1100px) {
  .settings-body {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .settings-body {
    grid-template-columns: 1fr;
  }
}

.settings-section {
  background: var(--md-surface-container);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--md-outline-variant);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.settings-row-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--md-on-surface);
}

.settings-row-desc {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
  line-height: 1.4;
}

.settings-row-control {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-shrink: 0;
}

/* --- Lane mapping (Settings) --- */

.lane-mapping-header,
.lane-mapping-row {
  display: grid;
  grid-template-columns: 2rem 1px 3rem 2.5rem;
  align-items: center;
  column-gap: var(--sp-sm);
  padding: 3px 0;
}

.lane-mapping-header {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 2px;
}


.lane-mapping-crews {
  font-weight: 600;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.lane-mapping-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}

.lane-mapping-from {
  padding: 3px 4px;
  height: 28px;
  font-size: 0.85rem;
  text-align: center;
  width: 3rem;
}

.lane-mapping-to {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* --- System list (Settings) --- */

.settings-ssh-key-area {
  font-family: monospace;
  font-size: 0.75rem;
  resize: vertical;
  min-height: 120px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.settings-ssh-paths-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: var(--sp-xs) 0 0;
  border-top: 1px solid var(--md-outline-variant);
  margin-top: var(--sp-xs);
  color: var(--md-on-surface-variant);
}

/* --- Directory Picker --- */
.dir-picker-row {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
  width: 100%;
}

.dir-picker-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.dir-picker-btn {
  flex-shrink: 0;
  padding: 0 12px;
  height: 40px;
}

/* --- Printers Settings --- */
.printer-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--md-outline-variant);
  width: 100%;
}

.printer-tab {
  padding: 6px 16px;
  border: none;
  background: none;
  color: var(--md-on-surface-variant);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.printer-tab:hover { color: var(--md-on-surface); }
.printer-tab.active { color: var(--md-primary); border-bottom-color: var(--md-primary); }

.printer-tabs .btn-icon { margin-left: auto; }

.printer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  border-bottom: 1px solid var(--md-outline-variant);
  gap: var(--sp-sm);
}
.printer-row:last-child { border-bottom: none; }

.printer-name {
  font-size: 0.85rem;
  color: var(--md-on-surface);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Event Attributes Bar --- */
/* --- Initial draw entries panel --- */
.initial-draw-entries {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: var(--sp-sm) 0;
  margin-bottom: var(--sp-sm);
}

.ide-entry {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 5px;
  row-gap: 1px;
  align-items: center;
  padding: 5px 8px;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  min-width: 0;
}

.ide-num {
  grid-column: 1; grid-row: 1;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container);
  border-radius: 3px;
  padding: 1px 4px;
  align-self: center;
}

.ide-flag, .ide-flag-placeholder {
  grid-column: 2; grid-row: 1;
  width: 22px; height: auto;
  align-self: center;
}

.ide-team {
  grid-column: 3; grid-row: 1;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ide-line2 {
  grid-column: 3; grid-row: 2;
  font-size: 0.7rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ide-loading, .ide-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 0.8rem;
  color: var(--md-on-surface-variant);
  padding: var(--sp-sm) 0;
}

.ide-loading .material-icons-round,
.ide-empty .material-icons-round { font-size: 18px; }

.ide-entry--seeded {
  opacity: 0.38;
  cursor: not-allowed;
}

.ide-entry--withdrawn {
  opacity: 0.5;
  cursor: not-allowed;
}

.ide-entry--withdrawn .ide-team {
  text-decoration: line-through;
  color: var(--md-on-surface-variant);
}

.ide-wd-badge {
  grid-column: 2; grid-row: 1;
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--md-error);
  letter-spacing: 0.04em;
  align-self: center;
}

.ide-entry[draggable="true"] { cursor: grab; }
.ide-entry[draggable="true"]:active { cursor: grabbing; }
.ide-entry.dragging { opacity: 0.5; }

/* ── Draw controls ── */
.draw-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 4px 0 8px;
}

.draw-controls-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: auto;
}

/* ── Draw drop zone (empty lane slot in draw mode) ── */
.empty-lane-slot.draw-drop-zone.evt-drag-over {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
}

.event-attrs-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 6px var(--sp-md);
  background: var(--md-surface-container);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-md);
}

.event-attrs-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  flex: 1;
}

.event-attrs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-high);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}

.event-attrs-chip .material-icons-round {
  font-size: 14px;
  color: var(--md-primary);
}

/* --- Form select --- */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}

.settings-value-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-primary);
  min-width: 110px;
  text-align: right;
}
/* --- Athlete autocomplete dropdown --- */
.ath-autocomplete {
  position: absolute;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  z-index: 2000;
  max-height: 320px;
  overflow-y: auto;
  min-width: 280px;
}
.ath-autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background 0.1s;
}
.ath-autocomplete-item:last-child { border-bottom: none; }
.ath-autocomplete-item:hover { background: var(--md-secondary-container); }
.ath-ac-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-on-surface);
}
.ath-ac-meta {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}
.ath-ac-id {
  font-family: 'Roboto Mono', monospace;
  color: var(--md-primary);
}
.ath-ac-club {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
  margin-top: 2px;
}

/* --- Top-bar View Tabs --- */
.top-bar-tabs {
  display: flex;
  gap: 3px;
  background: var(--md-surface-container);
  border-radius: var(--radius-full);
  padding: 3px;
  border: 1px solid var(--md-outline-variant);
  margin-right: var(--sp-xs);
}

.sub-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--md-on-surface-variant);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast);
  white-space: nowrap;
}

.sub-tab:hover {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}

.sub-tab.active {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.sub-tab .material-icons-round {
  font-size: 18px;
}

/* --- Races Split View --- */
.races-view {
  padding-top: var(--sp-sm);
}

.races-split {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-start;
}

.races-list-pane {
  width: 320px;
  flex-shrink: 0;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: calc(var(--top-bar-height) + var(--sp-md));
  max-height: calc(100vh - var(--top-bar-height) - var(--footer-height) - var(--sp-md) - var(--sp-lg) - 20px);
  overflow-y: auto;
}

.races-detail-pane {
  flex: 1;
  min-width: 0;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.races-detail-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: 0.9rem;
}

.races-split--docked .races-detail-pane {
  flex: 0 1 1080px;
}

/* Dock column — holds one or more docked panels */
.races-pdf-dock {
  flex: 1;
  min-width: 320px;
  align-self: flex-start;
  position: sticky;
  top: calc(var(--top-bar-height) + var(--sp-md));
  height: calc(100vh - var(--top-bar-height) - var(--footer-height) - var(--sp-md) - var(--sp-lg) - 20px);
  display: flex;
  flex-direction: column;
}

/* Any panel in docked state fills its share of the dock column */
.pdf-manager-docked,
.cmd-toolbar-docked {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: unset !important;
  max-width: unset !important;
  height: 0 !important;
  max-height: unset !important;
  flex: 1 1 0% !important;
  min-height: 180px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  resize: none !important;
  z-index: 1 !important;
  border-radius: var(--radius-lg) !important;
}

.pdf-manager-docked .pdf-manager-header {
  cursor: default;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.cmd-toolbar-docked .cmd-toolbar-body {
  flex: 1;
  max-height: unset;
}

/* Drag handle — hidden when floating, shown when docked */
.dock-drag-handle {
  display: none;
  cursor: grab;
  font-size: 20px;
  color: var(--md-on-surface-variant);
  opacity: 0.5;
  flex-shrink: 0;
}
.pdf-manager-docked .dock-drag-handle,
.cmd-toolbar-docked .dock-drag-handle {
  display: inline-flex;
}
.dock-drag-handle:active { cursor: grabbing; }

/* Drag reorder feedback */
.dock-panel-dragging { opacity: 0.4; }
.dock-panel-drag-over {
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

/* Horizontal resizer between docked panels */
.dock-resizer {
  flex: 0 0 10px;
  width: 100%;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  user-select: none;
}
.dock-resizer::after {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--md-outline-variant);
  transition: background 0.15s, width 0.15s;
}
.dock-resizer:hover::after,
.dock-resizer.dragging::after {
  background: var(--md-primary);
  width: 48px;
}

/* Search bar inside races list pane */
.races-list-search {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--md-surface-container-low);
  padding: 8px;
  border-bottom: 1px solid var(--md-outline-variant);
  display: flex;
  align-items: center;
}

.races-search-input {
  width: 100% !important;
  font-size: 0.875rem !important;
  padding: 7px 32px 7px 36px !important;
}

/* Race list items */
.races-list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background var(--trans-fast);
}

.races-list-item:last-child {
  border-bottom: none;
}

.races-list-item:hover {
  background: var(--md-surface-container-high);
}

.races-list-item.active {
  background: var(--md-primary-container);
}

.races-list-item.active:hover {
  filter: brightness(0.97);
}

.races-list-item--official {
  background: #F1F8E9;
  border-left: 3px solid #388E3C;
}

.races-list-item--official:hover {
  background: #E8F5E9;
}

.races-list-item--official.active {
  background: #C8E6C9;
}

[data-theme="dark"] .races-list-item--official {
  background: rgba(56, 142, 60, 0.12);
  border-left-color: #66BB6A;
}

[data-theme="dark"] .races-list-item--official:hover {
  background: rgba(56, 142, 60, 0.2);
}

[data-theme="dark"] .races-list-item--official.active {
  background: rgba(56, 142, 60, 0.28);
}

.races-list-item-badge {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background var(--trans-fast), color var(--trans-fast);
}

/* Round-type badge colours — keyed on first letter of etaName */
.races-list-item-badge.round-lx { background: #D81B60; color: #fff; }
.races-list-item-badge.round-h  { background: #E64A19; color: #fff; }
.races-list-item-badge.round-s  { background: #0288D1; color: #fff; }
.races-list-item-badge.round-q  { background: #3949AB; color: #fff; }
.races-list-item-badge.round-f  { background: #7B1FA2; color: #fff; }

/* Event number chip */
.event-no-chip {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

.races-list-item-body {
  flex: 1;
  min-width: 0;
}

.races-list-item-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.races-list-item-meta {
  font-size: 0.775rem;
  color: var(--md-on-surface-variant);
  margin-top: 1px;
}

.races-list-item-end {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.race-started-icon {
  font-size: 16px;
  color: #2E7D32;
}

.race-started-icon.race-started-finished {
  color: #B71C1C;
}

/* Race detail panels */
.race-detail-panel {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.race-detail-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px 10px 12px;
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
}

.race-detail-panel-header--running {
  background: #ffeaed;
  border-bottom-color: #ffb3bb;
}

.race-detail-panel-header--running .race-detail-panel-name,
.race-detail-panel-header--running .event-no-chip,
.race-detail-panel-header--running .race-detail-panel-meta {
  color: #7f0000;
}

[data-theme="dark"] .race-detail-panel-header--running {
  background: #1a0000;
  border-bottom-color: #7f0000;
}

[data-theme="dark"] .race-detail-panel-header--running .race-detail-panel-name,
[data-theme="dark"] .race-detail-panel-header--running .event-no-chip,
[data-theme="dark"] .race-detail-panel-header--running .race-detail-panel-meta {
  color: rgba(255,255,255,0.75);
}

[data-theme="dark"] .race-detail-panel-header--running .race-status-toggle,
[data-theme="dark"] .race-detail-panel-header--running .btn-icon {
  color: rgba(255,255,255,0.6);
}

[data-theme="dark"] .race-detail-panel-header--running .races-list-item-badge {
  opacity: 0.7;
}

.race-live-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.race-live-dot {
  font-size: 14px;
  color: #ff1744;
  animation: race-live-blink 1s step-end infinite;
}

.race-live-time {
  font-family: 'Roboto Mono', monospace;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ff1744;
  letter-spacing: 0.04em;
  min-width: 4.2ch;
}

@keyframes race-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.race-finishing-toggle {
  border-color: var(--md-secondary);
  color: var(--md-secondary);
}

.race-finishing-toggle:hover {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: var(--md-secondary);
}

.race-finishing-toggle.active-finishing-now {
  background: var(--md-secondary-container);
  border-color: var(--md-secondary);
  color: var(--md-on-secondary-container);
  font-weight: 600;
}

/* Currently Finishing panel content */
.finishing-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 8px 10px;
  background: var(--md-surface-container);
  border-radius: var(--radius-md);
  border: 1px solid var(--md-outline-variant);
  margin: 4px;
}

.finishing-toolbar-race {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.finishing-toolbar-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.finishing-toolbar-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finishing-toolbar-event {
  display: none;
}

.finishing-unmark-btn { flex-shrink: 0; }

.race-detail-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.race-detail-panel-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-on-surface);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.race-detail-panel-meta {
  font-size: 0.775rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  padding-right: 10px;
}

.race-detail-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.race-status-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 20px;
  background: transparent;
  color: var(--md-on-surface-variant);
  font-size: 0.775rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.race-status-toggle .material-icons-round {
  font-size: 16px;
}

.race-status-toggle:hover {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}

.race-status-toggle.active-ready {
  background: #E8F5E9;
  border-color: #2E7D32;
  color: #1B5E20;
}

.race-status-toggle.active-finished {
  background: #EDE7F6;
  border-color: #7B1FA2;
  color: #4A148C;
}

.race-status-toggle.active-official {
  background: #E3F2FD;
  border-color: #1565C0;
  color: #0D47A1;
}

[data-theme="dark"] .race-status-toggle.active-official {
  background: #0D47A1;
  border-color: #64B5F6;
  color: #BBDEFB;
}

.race-official-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px 8px 14px;
  border: none;
  border-radius: 20px;
  background: #1B5E20;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(27,94,32,0.35);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  white-space: nowrap;
}

.race-official-cta .material-icons-round {
  font-size: 18px;
}

.race-official-cta:hover {
  background: #2E7D32;
  box-shadow: 0 3px 10px rgba(27,94,32,0.45);
}

.race-official-cta:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(27,94,32,0.3);
}

[data-theme="dark"] .race-official-cta {
  background: #388E3C;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

[data-theme="dark"] .race-official-cta:hover {
  background: #43A047;
}

.race-official-readonly {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 20px;
  background: transparent;
  color: var(--md-on-surface-variant);
  font-size: 0.775rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

.race-official-readonly .material-icons-round {
  font-size: 16px;
}

.race-official-readonly.is-official {
  background: #E3F2FD;
  border-color: #1565C0;
  color: #0D47A1;
}

[data-theme="dark"] .race-official-readonly.is-official {
  background: #0D47A1;
  border-color: #64B5F6;
  color: #BBDEFB;
}

[data-theme="dark"] .race-status-toggle.active-ready {
  background: #1B5E20;
  border-color: #66BB6A;
  color: #C8E6C9;
}

.race-confirm-times {
  border-color: var(--md-tertiary);
  color: var(--md-tertiary);
}

.race-confirm-times:hover {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
  border-color: var(--md-tertiary);
}

.race-detail-panel-body {
  padding: 0;
  overflow-x: auto;
}

.race-detail-panel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--md-on-surface-variant);
  text-align: center;
}

/* Race panel lanes table */
.rpl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.rpl-th,
.rpl-cell {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--md-outline-variant);
  white-space: nowrap;
}

.rpl-th {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
  z-index: 1;
}

.rpl-row:hover td {
  background: var(--md-surface-container-high);
}

.rpl-row:last-child td {
  border-bottom: none;
}

.rpl-lane  { width: 40px; text-align: center; font-weight: 600; color: var(--md-on-surface-variant); }
.rpl-bow   { width: 40px; text-align: center; color: var(--md-on-surface-variant); }
.rpl-crew  { min-width: 160px; width: 100%; white-space: normal; }
.rpl-time  { width: 64px; text-align: right; font-family: monospace; font-size: 0.775rem; color: var(--md-on-surface); }

.rpl-time-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.rpl-time-official { text-align: left; }
.rpl-time-official .rpl-time-inner { justify-content: flex-start; }

.rpl-lap-time {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--md-on-surface-variant);
  opacity: 0.75;
  text-align: left;
  margin-top: 1px;
}

.rpl-tfoto-original {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--md-on-surface-variant);
  opacity: 0.75;
  text-align: left;
  margin-top: 1px;
}

.rpl-time-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s, background 0.1s, color 0.1s;
  color: var(--md-on-surface-variant);
}
.rpl-time-btn .material-icons-round { font-size: 12px; line-height: 1; }

.rpl-row:hover .rpl-time-btn { opacity: 0.45; }
.rpl-row:hover .rpl-time-clear:hover { opacity: 1; color: var(--md-error); background: var(--md-error-container); }
.rpl-row:hover .rpl-time-apply:hover { opacity: 1; color: var(--md-primary); background: var(--md-primary-container); }
.rpl-stime { width: 78px; }
.rpl-stime--set { color: var(--md-primary); }
.rpl-stime-icon { font-size: 11px !important; margin-right: 2px; color: var(--md-primary); vertical-align: middle; }
.rpl-ftime { width: 78px; }
.rpl-ftime--set { color: var(--md-tertiary, #6750a4); }
.rpl-ftime-icon { font-size: 11px !important; margin-right: 2px; color: var(--md-tertiary, #6750a4); vertical-align: middle; }
.rpl-flag  { width: 32px; text-align: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; }
.rpl-place { width: 32px; text-align: center; font-weight: 600; color: var(--md-primary); }
.rpl-action { width: 36px; text-align: center; padding: 2px 4px; }

.rpl-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.rpl-sortable:hover {
  color: var(--md-on-surface);
  background: var(--md-surface-container-high);
}

.rpl-sort-icon {
  font-size: 14px;
  vertical-align: middle;
  margin-left: 2px;
}

.rpl-sort-idle {
  opacity: 0.3;
}

.rpl-sort-active {
  color: var(--md-primary);
  opacity: 1;
}

.rpl-crew-inner {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.rpl-crew-text {
  min-width: 0;
  flex: 1;
}

.rpl-team {
  font-weight: 500;
  color: var(--md-on-surface);
}

.rpl-class-group {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--md-on-surface);
  color: var(--md-surface);
  font-weight: 700;
  font-size: 0.78em;
  line-height: 1.3;
  vertical-align: middle;
}

.rpl-club-flags {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.rpl-club-flag {
  height: 28px;
  width: 28px;
  object-fit: contain;
  border-radius: 3px;
}

.rpl-late::before {
  content: '»';
  color: var(--md-tertiary);
  margin-right: 4px;
  font-weight: 700;
}

.rpl-athlete {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
  white-space: normal;
  line-height: 1.4;
}

.rpl-athlete-sep {
  color: var(--md-outline-variant);
  font-size: 0.65rem;
}

.rpl-wi-status {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

.rpl-wi-icon {
  font-size: 14px;
}

.rpl-wi-dw {
  font-size: 0.72rem;
  font-weight: 600;
  color: #2e7d32;
}

.rpl-coach {
  font-size: 0.7rem;
  color: var(--md-outline);
  font-style: italic;
}

.rpl-masters {
  width: 72px;
  text-align: center;
  white-space: nowrap;
}

.rpl-masters-age {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--md-on-surface);
}

.rpl-masters-cat {
  font-size: 0.72rem;
  color: var(--md-on-surface-variant);
}

.rpl-withdrawn td {
  opacity: 0.45;
}

.rpl-withdrawn .rpl-team {
  text-decoration: line-through;
}

.rpl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  color: var(--md-on-surface-variant);
  text-align: center;
  gap: 8px;
}

.rpl-time-warn-500 {
  color: #b45309 !important;
  background: #fffbeb;
}
.rpl-time-warn-1000 {
  color: #b91c1c !important;
  background: #fef2f2;
}
[data-theme="dark"] .rpl-time-warn-500 {
  color: #fbbf24 !important;
  background: #3b2400;
}
[data-theme="dark"] .rpl-time-warn-1000 {
  color: #f87171 !important;
  background: #3b0000;
}
.rpl-warn-icon {
  font-size: 12px;
  vertical-align: middle;
  margin-right: 2px;
}
.rpl-time-warn-500 .rpl-warn-icon { color: #b45309; }
.rpl-time-warn-1000 .rpl-warn-icon { color: #b91c1c; }
[data-theme="dark"] .rpl-time-warn-500 .rpl-warn-icon { color: #fbbf24; }
[data-theme="dark"] .rpl-time-warn-1000 .rpl-warn-icon { color: #f87171; }

/* ================================================================
   Progression Manager
   ================================================================ */

.prog-layout {
  display: flex;
  gap: 0;
  height: calc(100vh - var(--top-bar-height) - var(--footer-height) - 80px);
  min-height: 0;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--md-surface);
}

/* Left list pane */
.prog-list-pane {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
}

.prog-list-toolbar {
  padding: var(--sp-md);
  border-bottom: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
}

.prog-new-btn { width: 100%; justify-content: center; }

.prog-list-items {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.prog-list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 12px var(--sp-md);
  cursor: pointer;
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background 0.12s;
  user-select: none;
}
.prog-list-item:last-child { border-bottom: none; }
.prog-list-item:hover { background: var(--md-surface-container); }
.prog-list-item.selected { background: var(--md-primary-container); }

.prog-list-item-name {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prog-list-item.selected .prog-list-item-name { color: var(--md-on-primary-container); }

.prog-list-item-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-high);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.prog-list-item.selected .prog-list-item-badge {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

/* Right editor pane */
.prog-editor-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.prog-editor-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  color: var(--md-on-surface-variant);
  opacity: 0.4;
  font-size: 0.9rem;
}
.prog-editor-placeholder .material-icons-round { font-size: 64px; }

.prog-editor {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Editor header */
.prog-editor-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
  padding: var(--sp-md) var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  flex-shrink: 0;
}

.prog-header-row1 {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.prog-header-row1 .form-field { flex: 1; min-width: 160px; }
.prog-header-row1 .form-field.lane-count-field { flex: 0 0 120px; }

.prog-header-actions {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
  flex-shrink: 0;
}

.prog-desc-field { width: 100%; }
.prog-desc-field textarea {
  width: 100%;
  min-height: 52px;
  max-height: 120px;
  resize: vertical;
  font-family: inherit;
  font-size: 0.875rem;
  padding: 10px 12px;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-md);
  background: var(--md-surface);
  color: var(--md-on-surface);
  box-sizing: border-box;
}
.prog-desc-field textarea:focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-primary) 20%, transparent);
}

/* Variants section */
.prog-variants-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
}

.prog-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) 0;
}

.prog-section-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

/* Variant card */
.variant-card {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--md-surface-container);
}

.variant-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--md-surface-container-high);
  border-bottom: 1px solid var(--md-outline-variant);
  flex-wrap: wrap;
}

.variant-header-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}

.variant-crews-input {
  width: 64px;
  text-align: center;
  padding: 4px 8px;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-sm);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-size: 0.875rem;
  -moz-appearance: textfield;
}
.variant-crews-input::-webkit-inner-spin-button,
.variant-crews-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.variant-crews-input:focus { outline: none; border-color: var(--md-primary); }

.variant-body { padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-sm); }

/* Rounds */
.rounds-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-xs);
}
.rounds-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.round-row {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--md-surface);
}

.round-row-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 8px var(--sp-sm) 8px var(--sp-md);
  flex-wrap: wrap;
}

.round-shortname-input {
  width: 52px;
  text-align: center;
  padding: 5px 6px;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-sm);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Roboto Mono', monospace;
  text-transform: uppercase;
}
.round-shortname-input:focus { outline: none; border-color: var(--md-primary); }

.round-method-select {
  padding: 5px 8px;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-sm);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  font-size: 0.8rem;
  cursor: pointer;
}
.round-method-select:focus { outline: none; border-color: var(--md-primary); }

.round-desc-input {
  flex: 1;
  min-width: 120px;
  padding: 5px 8px;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-sm);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-size: 0.8rem;
}
.round-desc-input:focus { outline: none; border-color: var(--md-primary); }
.round-desc-input::placeholder { color: var(--md-on-surface-variant); opacity: 0.6; }

.round-row-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }

/* Lane grid */
.lane-grid-wrap {
  border-top: 1px solid var(--md-outline-variant);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--md-surface-container-low);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.lane-grid-hint {
  font-size: 0.72rem;
  color: var(--md-on-surface-variant);
  font-style: italic;
}

.lane-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.lane-grid-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  padding: 4px 8px 6px;
  border-bottom: 1px solid var(--md-outline-variant);
}
.lane-grid-table td {
  padding: 3px 4px;
  vertical-align: middle;
}
.lane-grid-table tr:hover td { background: var(--md-surface-container); }

.lane-no-cell {
  width: 40px;
  text-align: center;
  font-weight: 600;
  font-family: 'Roboto Mono', monospace;
  color: var(--md-on-surface-variant);
  font-size: 0.8rem;
}

.lane-source-select {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-sm);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-size: 0.8rem;
  font-family: 'Roboto Mono', monospace;
}
.lane-source-select:focus { outline: none; border-color: var(--md-primary); }

.lane-place-input {
  width: 52px;
  text-align: center;
  padding: 3px 6px;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-sm);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-size: 0.8rem;
  -moz-appearance: textfield;
}
.lane-place-input::-webkit-inner-spin-button,
.lane-place-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.lane-place-input:focus { outline: none; border-color: var(--md-primary); }
.lane-place-input:disabled { opacity: 0.4; }

.lane-grid-footer {
  display: flex;
  justify-content: flex-start;
}

.prog-empty-list {
  padding: var(--sp-xl) var(--sp-md);
  text-align: center;
  color: var(--md-on-surface-variant);
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ================================================================
   Race panel footer
   ================================================================ */

.race-panel-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  flex-wrap: wrap;
}
[data-role="info"] .race-panel-footer { display: none; }

.race-doc-btn-wrap {
  position: relative;
}

.race-doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 20px;
  background: var(--md-surface);
  color: var(--md-on-surface-variant);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.race-doc-btn .material-icons-round {
  font-size: 1rem;
}
.race-doc-btn .race-doc-chevron {
  font-size: 0.9rem;
  opacity: 0.6;
  transition: transform 0.15s;
}
.race-doc-btn:hover {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border-color: var(--md-outline);
}
.race-doc-btn.active {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-color: var(--md-primary);
}
.race-doc-btn.active .race-doc-chevron {
  transform: rotate(180deg);
}

.race-doc-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--md-surface-container-highest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 200;
  overflow: hidden;
}
.race-doc-dropdown.hidden { display: none; }

.race-doc-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--md-on-surface);
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.race-doc-menu-item .material-icons-round {
  font-size: 1rem;
  color: var(--md-on-surface-variant);
}
.race-doc-menu-item:hover {
  background: var(--md-surface-container-high);
}

/* ================================================================
   Results editor overlay
   ================================================================ */

.results-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
}
.results-editor-overlay.hidden { display: none; }

.results-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  height: 48px;
  background: #1a1a1a;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}

.results-editor-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  min-width: 0;
}
.results-editor-topbar-left .material-icons-round { color: #aaa; font-size: 1.2rem; }
.results-editor-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.results-template-select {
  background: #333;
  color: #ddd;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.8rem;
  cursor: pointer;
}
.results-template-select:focus { outline: none; border-color: var(--md-primary); }

.results-editor-topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.results-editor-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #ddd;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.results-editor-btn .material-icons-round { font-size: 1.1rem; }
.results-editor-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.results-editor-btn.active { background: rgba(25,118,210,0.35); color: #90caf9; }
.results-editor-btn-orient { color: #aaa; }
.results-editor-btn-orient.active { background: rgba(25,118,210,0.35); color: #90caf9; }
.results-editor-btn-draft {
  background: rgba(25,118,210,0.3);
  color: #90caf9;
}
.results-editor-btn-draft:hover { background: rgba(25,118,210,0.55); color: #bbdefb; }
.results-editor-btn-approve {
  background: rgba(46,125,50,0.5);
  color: #a5d6a7;
}
.results-editor-btn-approve:hover { background: rgba(46,125,50,0.8); color: #c8e6c9; }
.results-editor-btn-close { background: rgba(198,40,40,0.3); color: #ef9a9a; }
.results-editor-btn-close:hover { background: rgba(198,40,40,0.6); color: #ffcdd2; }
.results-editor-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.15); margin: 0 4px; }
.results-editor-umpire-select {
  padding: 3px 8px;
  height: 28px;
  max-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: #ddd;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.results-editor-umpire-select:hover { background: rgba(255,255,255,0.14); }
.results-editor-tt-date-select {
  padding: 3px 8px;
  height: 28px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: #ddd;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.results-editor-tt-date-select:hover { background: rgba(255,255,255,0.14); }
.results-editor-break-container { display: flex; align-items: center; gap: 5px; }
.results-editor-break-label { font-size: 10px; color: #aaa; white-space: nowrap; }
.results-editor-tt-break-input {
  width: 52px;
  padding: 3px 6px;
  height: 28px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: #ddd;
  font-size: 11px;
  font-family: inherit;
  outline: none;
  text-align: center;
}
.results-editor-tt-break-input:hover { background: rgba(255,255,255,0.14); }
.results-editor-tt-break-input::placeholder { color: rgba(255,255,255,0.3); }
.results-editor-filename-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.results-editor-filename-input {
  width: 200px;
  padding: 3px 7px;
  height: 28px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: #ddd;
  font-size: 11px;
  font-family: inherit;
  outline: none;
}
.results-editor-filename-input:focus { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.12); }
.results-editor-filename-input::placeholder { color: rgba(255,255,255,0.3); }
.results-editor-filename-input.invalid { border-color: rgba(239,83,80,0.7); }
.results-editor-filename-ext { font-size: 11px; color: #777; white-space: nowrap; }

.results-editor-frame {
  flex: 1;
  border: none;
  background: #fff;
}

/* ================================================================
   Athlete parsing patterns list
   ================================================================ */
#athlete-patterns-list {
  border: 1.5px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ath-pattern-row {
  display: grid;
  grid-template-columns: 32px 1fr 2fr 64px;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background 0.1s;
}

.ath-pattern-row:last-child {
  border-bottom: none;
}

.ath-pattern-row:hover {
  background: var(--md-surface-container-low);
}

.ath-pattern-row--active {
  background: var(--md-primary-container);
}

.ath-pattern-row--active:hover {
  background: var(--md-primary-container);
}

.ath-pattern-row--editing {
  background: var(--md-surface-container);
  padding: 5px 8px;
}

.ath-pattern-row--editing:hover {
  background: var(--md-surface-container);
}

.ath-pattern-radio {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ath-pattern-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--md-primary);
}

.ath-pattern-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ath-pattern-template {
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 6px;
  background: var(--md-surface-container-high);
  border-radius: var(--radius-sm);
}

.ath-pattern-row--active .ath-pattern-template {
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
}

.ath-pattern-actions {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}

.ath-pattern-empty {
  font-size: 0.82rem;
  color: var(--md-on-surface-variant);
  padding: 12px 14px;
  margin: 0;
}

.ath-pattern-name-input,
.ath-pattern-template-input {
  font-size: 0.82rem;
  padding: 4px 8px;
  height: 30px;
}

.ath-pattern-template-input {
  font-size: 0.78rem;
}

/* ---- Spinning icon for async buttons ---- */
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.icon-spin {
  display: inline-block;
  animation: icon-spin 0.9s linear infinite;
}

/* ── Progression Block Graph Editor ──────────────────────────── */

.pg-graph-area { margin-top: 12px; }

.pg-canvas-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 48px; gap: 12px;
  color: var(--md-on-surface-variant); text-align: center;
}

.pg-canvas-wrap { overflow-x: auto; overflow-y: visible; }

.pg-canvas {
  display: flex; flex-direction: row; align-items: center;
  gap: 0; padding: 20px; min-height: 280px; position: relative;
  width: max-content; min-width: 100%;
}

.pg-svg { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }

.pg-col { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }

.pg-series-col {
  min-width: 210px; max-width: 260px;
  background: rgba(25,118,210,0.04);
  border-radius: 10px; padding: 10px;
  border: 1px solid rgba(25,118,210,0.15);
}

.pg-between-zone {
  min-width: 190px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
}

.pg-col-head {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  font-size: 0.72rem; font-weight: 600; color: var(--md-on-surface-variant);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.07); margin-bottom: 4px;
}
.pg-col-head > span { align-self: flex-start; }
.pg-series-desc-input {
  font-size: 0.68rem; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--md-on-surface); width: 100%; padding: 2px 4px;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  transition: border-color 0.15s, background 0.15s;
}
.pg-series-desc-input:hover { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.02); }
.pg-series-desc-input:focus { border-color: var(--md-primary); background: #fff; outline: none; }
.pg-series-desc-input::placeholder { color: var(--md-on-surface-variant); font-style: italic; opacity: 0.75; }
.pg-series-longdesc-input {
  font-size: 0.68rem; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--md-on-surface); width: 100%; padding: 2px 4px;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  transition: border-color 0.15s, background 0.15s;
  resize: vertical; min-height: 36px; font-family: inherit;
}
.pg-series-longdesc-input:hover { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.02); }
.pg-series-longdesc-input:focus { border-color: var(--md-primary); background: #fff; outline: none; }
.pg-series-longdesc-input::placeholder { color: var(--md-on-surface-variant); font-style: italic; opacity: 0.75; }

.pg-col-body { display: flex; flex-direction: column; gap: 10px; }

.pg-between-subzones { display: flex; flex-direction: row; gap: 14px; align-items: flex-start; }
.pg-between-subzone  { display: flex; flex-direction: column; gap: 10px; min-width: 160px; }

.pg-col-btn {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 0.7rem; padding: 3px 8px; border-radius: 6px;
  background: rgba(25,118,210,0.08); color: var(--md-primary);
  border: 1px solid rgba(25,118,210,0.2); cursor: pointer; white-space: nowrap;
}
.pg-col-btn:hover { background: rgba(25,118,210,0.16); }

/* Nodes */
.pg-node {
  background: var(--md-surface, #fff);
  border-radius: 10px; border: 1.5px solid rgba(0,0,0,0.12);
  position: relative; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Race node */
.pg-race-node { border-color: rgba(25,118,210,0.35); }

.pg-node-row { display: flex; align-items: stretch; }

.pg-race-body { flex: 1; display: flex; flex-direction: column; padding: 8px; gap: 6px; min-width: 0; }

.pg-race-head { display: flex; align-items: center; gap: 4px; }

.pg-eta-input {
  flex: 1; min-width: 0; border: 1px solid rgba(0,0,0,0.15); border-radius: 5px;
  padding: 3px 6px; font-size: 0.85rem; font-weight: 600; background: transparent;
}

.pg-series-badge {
  font-size: 0.62rem; background: rgba(25,118,210,0.1);
  color: var(--md-primary); padding: 1px 5px; border-radius: 10px; white-space: nowrap;
}

/* Lane table */
.pg-lanes-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.pg-lanes-table th {
  font-size: 0.62rem; color: var(--md-on-surface-variant); text-align: left;
  padding: 2px 4px; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.pg-lane-no { color: var(--md-on-surface-variant); padding: 2px 4px; white-space: nowrap; }
.pg-crew-pos-input {
  width: 44px; padding: 2px 4px; border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px; font-size: 0.72rem; text-align: center; background: transparent;
}

/* Block node */
.pg-block-node {
  display: flex; flex-direction: row; align-items: stretch;
  border-color: rgba(56,142,60,0.4); background: rgba(56,142,60,0.04); min-height: 60px;
}

.pg-block-ins, .pg-block-outs {
  display: flex; flex-direction: column; justify-content: space-around;
  align-items: center; padding: 8px 4px; gap: 6px;
}

.pg-block-body { flex: 1; padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.pg-block-label { font-size: 0.72rem; font-weight: 700; color: rgba(56,142,60,1); }

.pg-param-row { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.pg-param-label { font-size: 0.65rem; color: var(--md-on-surface-variant); white-space: nowrap; }
.pg-param-input {
  width: 36px; flex-shrink: 0; padding: 2px 4px; border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px; font-size: 0.72rem; text-align: right; background: transparent;
}

/* Ports */
.pg-port {
  width: 13px; height: 13px; border-radius: 50%; border: 2px solid;
  cursor: crosshair; flex-shrink: 0; position: relative; z-index: 2;
  transition: transform 0.12s, background 0.12s; display: flex; align-items: center; justify-content: center;
}
.pg-out-port { border-color: var(--md-primary, #1976d2); background: #fff; margin: 0 3px; }
.pg-in-port  { border-color: rgba(56,142,60,1); background: #fff; margin: 0 3px; }
.pg-port:hover { transform: scale(1.35); }
.pg-port-connectable { transform: scale(1.2); background: rgba(56,142,60,0.15) !important; border-color: rgba(56,142,60,1) !important; }
.pg-port-active { transform: scale(1.5) !important; background: var(--md-primary) !important; }

.pg-port-row { display: flex; align-items: center; gap: 3px; }
.pg-port-row-out { flex-direction: row-reverse; }
.pg-port-label { font-size: 0.58rem; color: var(--md-on-surface-variant); white-space: nowrap; }

/* Delete button */
.pg-del-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--md-on-surface-variant); padding: 2px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-left: auto; flex-shrink: 0;
}
.pg-del-btn:hover { color: var(--md-error); background: rgba(211,47,47,0.08); }

/* Add block dropdown */
.pg-add-block-wrap { position: relative; width: 100%; }
.pg-col-btn { width: 100%; justify-content: center; }
.pg-block-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  background: var(--md-surface, #fff); border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); min-width: 160px; padding: 4px 0;
}
.pg-block-menu-item {
  padding: 7px 14px; font-size: 0.78rem; cursor: pointer; color: var(--md-on-surface);
}
.pg-block-menu-item:hover { background: rgba(25,118,210,0.08); }

/* SVG edges */
.pg-edge {
  fill: none; stroke: var(--md-primary, #1976d2);
  stroke-width: 2; stroke-linecap: round; cursor: pointer;
}
.pg-edge:hover { stroke: var(--md-error, #d32f2f); stroke-width: 3; }

.pg-edge-del { cursor: pointer; }
.pg-edge-del circle { fill: #fff; stroke: rgba(0,0,0,0.18); stroke-width: 1; opacity: 0; transition: opacity 0.15s; }
.pg-edge-del text { fill: #888; font-family: sans-serif; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.pg-edge-del:hover circle, .pg-edge-del:hover text { opacity: 1; }
.pg-initial-zone { min-width: 160px; padding-right: 20px; }
.pg-initial-zone .pg-col-head { background: transparent; border-bottom: 1px solid #c7d6ea; }
.pg-initial-zone .pg-zone-label { font-weight: 700; color: #3a6ea8; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.pg-block-random { border: 2px solid #3a6ea8 !important; background: linear-gradient(160deg, #dbeeff 0%, #c9dbf5 100%) !important; }
.pg-block-random .pg-block-label { color: #1a4a8a; font-weight: 700; }
.pg-block-random .pg-port-row-out .pg-port-label { color: #2563a8; font-size: 10px; }
.pg-block-lineardraw { border: 2px solid #2e7d5e !important; background: linear-gradient(160deg, #dbf5ee 0%, #c9eed8 100%) !important; }
.pg-block-lineardraw .pg-block-label { color: #1a5c40; font-weight: 700; }
.pg-block-lineardraw .pg-port-row-out .pg-port-label { color: #1a6644; font-size: 10px; }
.pg-prog-round-select { font-size: 0.7rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; padding: 1px 2px; background: #fff; max-width: 64px; width: 64px; }
#prog-save-btn.pg-dirty { animation: pg-dirty-pulse 2s ease-in-out infinite; }
@keyframes pg-dirty-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(25,118,210,0.4); } 50% { box-shadow: 0 0 0 5px rgba(25,118,210,0); } }
.pg-lanes-table thead th:nth-child(2), .pg-lanes-table td:nth-child(2) { min-width: 68px; }

/* ================================================================
   MAX API Updates Modal
   ================================================================ */

.max-updates-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  padding: var(--sp-xl) var(--sp-lg);
  color: var(--md-on-surface-variant);
  font-size: 0.95rem;
}
.max-updates-empty .material-icons-round { font-size: 40px; color: var(--md-primary); opacity: 0.6; }

.max-update-item {
  border-bottom: 1px solid var(--md-outline-variant);
  padding: var(--sp-md) var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.max-update-item:last-child { border-bottom: none; }

.max-update-item-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  cursor: pointer;
  flex-wrap: wrap;
}
.max-update-item-header input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--md-primary);
  cursor: pointer;
}
.max-update-item-header input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.4; }

.max-update-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.max-update-badge-new_entry     { background: #d1fae5; color: #065f46; }
.max-update-badge-withdrawal    { background: #fee2e2; color: #991b1b; }
.max-update-badge-crew_change   { background: #fef3c7; color: #78350f; }
.max-update-badge-seating_order { background: #e0e7ff; color: #3730a3; }
.max-update-badge-club_change   { background: #fce7f3; color: #831843; }

.max-update-class {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--md-primary);
  white-space: nowrap;
}
.max-update-team {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--md-on-surface);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.max-update-bow {
  font-size: 0.8rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  flex-shrink: 0;
}

.max-update-comment {
  font-size: 0.82rem;
  color: var(--md-on-surface-variant);
  padding: 2px 0 0 24px;
}
.max-update-comment-label {
  font-weight: 600;
  color: var(--md-on-surface);
}

.max-update-crew-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
  margin-top: 2px;
  padding-left: 24px;
}
.max-update-crew-col {
  background: var(--md-surface-container);
  border-radius: var(--radius-md);
  padding: var(--sp-sm);
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.max-update-crew-col-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.max-update-crew-name { color: var(--md-on-surface); }
.max-update-crew-empty { color: var(--md-on-surface-variant); font-style: italic; }

.max-update-events-note {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--md-on-surface-variant);
  padding-left: 24px;
  font-style: italic;
}

.max-update-event-no {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.max-update-race-no {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

.max-update-placement {
  padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) 24px;
  border-top: 1px solid var(--md-outline-variant);
  margin-top: 2px;
}
.max-update-placement.hidden { display: none; }
.max-update-placement-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
}
.max-update-placement-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
}
.max-update-placement-label {
  font-weight: 600;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.max-update-placement-field input[type="number"] {
  width: 64px;
  padding: 3px 6px;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-sm);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-size: 0.85rem;
}
.max-update-placement-field select {
  padding: 3px 6px;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-sm);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-size: 0.85rem;
  min-width: 120px;
}
.max-update-placement-field select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ================================================================
   Role-based Access Control
   ================================================================ */

/* Admin role: hide timing station nav */
body[data-role="admin"] #nav-timing,
body[data-role="info"] #nav-timing,
body[data-role="umpire-finish"] #nav-timing { display: none !important; }

/* Info role: hide admin/auth-only top-bar controls */
body[data-role="info"] .sync-btn-wrapper,
body[data-role="info"] #cmd-toolbar-btn,
body[data-role="info"] .user-chip,
body[data-role="info"] #logout-btn { display: none !important; }

/* Umpire-finish role: hide admin-only top-bar controls (but keep user-chip and logout) */
body[data-role="umpire-finish"] .sync-btn-wrapper,
body[data-role="umpire-finish"] #cmd-toolbar-btn { display: none !important; }

/* Info role: hide all pencil-edit buttons and write-only action buttons */
body[data-role="info"] .edit-btn,
body[data-role="info"] .write-action { display: none !important; }

/* Umpire-finish role: same write restrictions as info */
body[data-role="umpire-finish"] .edit-btn,
body[data-role="umpire-finish"] .write-action { display: none !important; }

/* Info role: hide + buttons, lane action bar, and drag hint in event detail view */
body[data-role="info"] .add-race-row,
body[data-role="info"] .empty-lane-slot,
body[data-role="info"] .lane-card-actions,
body[data-role="info"] #events-drag-hint { display: none !important; }

/* Umpire-finish role: same */
body[data-role="umpire-finish"] .add-race-row,
body[data-role="umpire-finish"] .empty-lane-slot,
body[data-role="umpire-finish"] .lane-card-actions,
body[data-role="umpire-finish"] #events-drag-hint { display: none !important; }

/* Info role: hide write controls in event/editor views */
body[data-role="info"] #btn-create-event,
body[data-role="info"] #shuffle-btn,
body[data-role="info"] #add-entry-btn,
body[data-role="info"] #initial-draw-section,
body[data-role="info"] .editor-distance-widget,
body[data-role="info"] #event-attrs-bar .btn-icon-sm { display: none !important; }

/* Umpire-finish role: same */
body[data-role="umpire-finish"] #btn-create-event,
body[data-role="umpire-finish"] #shuffle-btn,
body[data-role="umpire-finish"] #add-entry-btn,
body[data-role="umpire-finish"] #initial-draw-section,
body[data-role="umpire-finish"] .editor-distance-widget,
body[data-role="umpire-finish"] #event-attrs-bar .btn-icon-sm { display: none !important; }

/* Info role: hide irrelevant nav sections */
body[data-role="info"] #nav-logs,
body[data-role="info"] #nav-progressions,
body[data-role="info"] #nav-settings { display: none !important; }

/* Umpire-finish role: same nav restrictions */
body[data-role="umpire-finish"] #nav-logs,
body[data-role="umpire-finish"] #nav-progressions,
body[data-role="umpire-finish"] #nav-settings { display: none !important; }

/* Umpire-finish role: hide race footer and race status buttons (Ready/Finished/etc.)
   except the official toggle which has its own class */
[data-role="umpire-finish"] .race-panel-footer { display: none; }
body[data-role="umpire-finish"] .race-status-toggle:not(.race-official-toggle) { display: none !important; }

/* "Return to Login" button: only visible in info mode */
body:not([data-role="info"]) #info-login-btn { display: none !important; }

/* Timing role: only timing station module is accessible */
body[data-role="timing"] #nav-classes,
body[data-role="timing"] #nav-logs,
body[data-role="timing"] #nav-progressions,
body[data-role="timing"] #nav-settings,
body[data-role="timing"] #cmd-toolbar-btn,
body[data-role="timing"] .sync-btn-wrapper { display: none !important; }

body[data-role="weight"] #nav-classes,
body[data-role="weight"] #nav-logs,
body[data-role="weight"] #nav-progressions,
body[data-role="weight"] #nav-settings,
body[data-role="weight"] #nav-timing,
body[data-role="weight"] .nav-separator,
body[data-role="weight"] #cmd-toolbar-btn,
body[data-role="weight"] .sync-btn-wrapper,
body[data-role="weight"] .user-chip { display: none !important; }

/* ================================================================
   Weigh-In View
   ================================================================ */

#view-weighin {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--top-bar-height) - var(--footer-height) - 2 * var(--sp-lg));
}
#view-weighin.hidden { display: none; }
#view-weighin .view-header {
  margin-bottom: var(--sp-sm);
  flex-shrink: 0;
}

.wi-date-display {
  margin-left: var(--sp-md);
  font-size: 0.85rem;
  color: var(--md-on-surface-variant);
  font-weight: 400;
}

.wi-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--md-surface);
}

/* Left pane */
.wi-list-pane {
  flex: 0 0 40%;
  max-width: 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
}

.wi-list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
}

.wi-list-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-on-surface-variant);
}

.wi-race-list {
  flex: 1;
  overflow-y: auto;
}

.wi-race-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 6px var(--sp-md);
  border-bottom: 1px solid var(--md-outline-variant);
  cursor: pointer;
  transition: background var(--trans-fast);
  min-width: 0;
}
.wi-race-item:last-child { border-bottom: none; }
.wi-race-item:hover { background: var(--md-surface-container); }
.wi-race-item.selected { background: var(--md-primary-container); }

.wi-race-item-green   { border-left: 3px solid #66bb6a; background: rgba(76, 175, 80, 0.07); }
.wi-race-item-red     { border-left: 3px solid #ef5350; background: rgba(244, 67, 54, 0.07); }
.wi-race-item-pending { border-left: 3px solid var(--md-outline-variant); }
.wi-race-item-green.selected,
.wi-race-item-red.selected { background: var(--md-primary-container); }

.wi-race-evno {
  flex-shrink: 0;
  width: 26px;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--md-on-surface-variant);
}

.wi-race-time {
  flex-shrink: 0;
  width: 40px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--md-primary);
}
.wi-race-item.selected .wi-race-time { color: var(--md-on-primary-container); }

.wi-race-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.wi-race-item.selected .wi-race-name { color: var(--md-on-primary-container); }

.wi-race-eta {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}

.wi-race-status-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.wi-rs-green   { color: #4caf50; }
.wi-rs-red     { color: #f44336; }
.wi-rs-pending { color: var(--md-outline); }

.wi-window-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.wi-window-pending { background: var(--md-surface-container); color: var(--md-on-surface-variant); }
.wi-window-open    { background: #e8f5e9; color: #2e7d32; }
.wi-window-soon    { background: #fff8e1; color: #e65100; }
.wi-window-closed  { background: #fce4ec; color: #b71c1c; }

.wi-empty {
  padding: var(--sp-lg);
  text-align: center;
  color: var(--md-outline);
  font-size: 0.9rem;
}

/* Right pane */
.wi-detail-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.wi-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--sp-md);
  color: var(--md-outline);
}
.wi-placeholder .material-icons-round { font-size: 64px; }

.wi-detail {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Info bar — sticky header */
.wi-info-bar {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.wi-info-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--md-on-surface);
}

.wi-info-meta {
  font-size: 0.82rem;
  color: var(--md-on-surface-variant);
  margin-top: 2px;
}

.wi-window-block {
  text-align: right;
  flex-shrink: 0;
}

.wi-window-until-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-on-surface-variant);
}

.wi-window-until-value {
  font-size: 1.1rem;
  font-weight: 700;
}

.wi-window-remaining {
  font-size: 0.78rem;
  margin-top: 1px;
}

/* Targets bar */
.wi-targets {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  padding: var(--sp-sm) var(--sp-lg);
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
}

.wi-target-item { display: flex; flex-direction: column; gap: 1px; }

.wi-target-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--md-primary);
}

.wi-target-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-on-surface-variant);
}

.wi-target-sep {
  color: var(--md-outline-variant);
  font-size: 1.2rem;
}

/* Crews area */
.wi-crews {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-md) var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.wi-crew-card {
  flex-shrink: 0;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.wi-crew-withdrawn { opacity: 0.55; }
.wi-crew-tint-ok  { border-color: #66bb6a; background: rgba(76, 175, 80, 0.06); }
.wi-crew-tint-red { border-color: #ef5350; background: rgba(244, 67, 54, 0.06); }

.wi-crew-header {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-xs) var(--sp-md);
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
}

.wi-crew-bow {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--md-on-surface-variant);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.wi-crew-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wi-crew-status-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wi-status-ok         { background: #e8f5e9; color: #2e7d32; }
.wi-status-over       { background: #fce4ec; color: #b71c1c; }
.wi-status-warn       { background: #fff8e1; color: #e65100; }
.wi-status-incomplete { background: var(--md-surface-container); color: var(--md-on-surface-variant); }

.wi-athlete-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-xs) var(--sp-md);
  border-bottom: 1px solid var(--md-outline-variant);
  min-height: 44px;
}
.wi-athlete-row:last-child { border-bottom: none; }

.wi-cox-label {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--md-primary);
  background: var(--md-primary-container);
  padding: 2px 5px;
  border-radius: var(--radius-full);
  width: 28px;
  text-align: center;
}

.wi-cox-spacer { width: 28px; flex-shrink: 0; }

.wi-athlete-name {
  flex: 1;
  font-size: 0.85rem;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.wi-weight-placeholder {
  width: 80px;
  flex-shrink: 0;
}

.wi-weight-input {
  width: 80px !important;
  flex-shrink: 0;
  text-align: center !important;
  padding: 6px 8px !important;
  font-weight: 600 !important;
}
.wi-weight-ok   { border-color: #4caf50 !important; }
.wi-weight-over { border-color: #f44336 !important; background: #fce4ec !important; }
.wi-weight-low  { border-color: #ff9800 !important; }

.wi-athlete-icon {
  font-size: 18px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.wi-icon-ok   { color: #4caf50; }
.wi-icon-over { color: #f44336; }
.wi-icon-low  { color: #ff9800; }

.wi-dw-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-md) var(--sp-sm);
  background: #fff8e1;
  border-bottom: 1px solid var(--md-outline-variant);
  flex-wrap: wrap;
}

.wi-dw-amount {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e65100;
}
.wi-dw-confirmed { color: #2e7d32; }

.wi-crew-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  padding: var(--sp-xs) var(--sp-md);
  background: var(--md-surface-container);
  font-size: 0.78rem;
  color: var(--md-on-surface-variant);
  flex-wrap: wrap;
}

.wi-crew-footer-item { display: flex; gap: 4px; align-items: center; }
.wi-footer-value { font-weight: 600; color: var(--md-on-surface); }
.wi-footer-over  { font-weight: 700; color: #b71c1c; }

/* Auth screen: info system divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  color: var(--md-sys-color-outline, #79747e);
}
.auth-divider-line {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}
.auth-divider-text {
  font-size: 12px;
  opacity: 0.6;
}

/* ================================================================
   Timing Station Layout
   ================================================================ */

.timing-layout {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-start;
  padding-top: var(--sp-sm);
}

/* Left column: races list + race detail */
.timing-races-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.timing-races-split {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-start;
}

#timing-list-pane {
  position: sticky !important;
  top: calc(var(--top-bar-height) + var(--sp-md)) !important;
  max-height: calc(100vh - var(--top-bar-height) - var(--footer-height) - var(--sp-md) - var(--sp-lg) - 20px) !important;
  overflow-y: auto;
  flex-shrink: 0;
}

#timing-detail-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

/* Right column: two docked panels */
.timing-dock-col {
  width: 320px;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: calc(var(--top-bar-height) + var(--sp-md));
  height: calc(100vh - var(--top-bar-height) - var(--footer-height) - var(--sp-md) - var(--sp-lg) - 20px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.timing-panel {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.timing-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  flex-shrink: 0;
}

.timing-panel-header .material-icons-round {
  font-size: 18px;
  opacity: 0.7;
}

.timing-panel-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 6px 10px;
  border-bottom: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
}

.timing-impulse-btn {
  flex: 1;
  font-size: 0.78rem;
  padding: 5px 8px;
  gap: 4px;
}

.timing-impulse-btn .material-icons-round {
  font-size: 16px;
}

.timing-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-sm);
}

.serial-device-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.serial-device-bar .serial-usb-icon {
  font-size: 16px;
  color: var(--md-on-surface-variant);
  opacity: 0.7;
}

.serial-device-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  flex: 1;
}

.serial-device-status {
  font-size: 0.75rem;
}

.serial-status-connected { color: var(--md-secondary); font-weight: 500; }
.serial-status-disconnected { color: var(--md-on-surface-variant); opacity: 0.55; }
.serial-status-connecting, .serial-status-reconnecting { color: var(--md-primary); }

.ecp-panel {
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  overflow: hidden;
}

.ecp-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  user-select: none;
}

.ecp-panel-header:hover {
  background: var(--md-surface-container-high, var(--md-surface-container));
  filter: brightness(0.96);
}

.ecp-hub-icon {
  font-size: 16px;
  color: var(--md-on-surface-variant);
  opacity: 0.7;
}

.ecp-panel-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  flex: 1;
}

.ecp-status-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.ecp-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ecp-dot-active { background: var(--md-secondary); }
.ecp-dot-idle   { background: var(--md-on-surface-variant); opacity: 0.35; }
.ecp-dot-error  { background: var(--md-error); }

.ecp-chevron {
  font-size: 18px;
  color: var(--md-on-surface-variant);
  opacity: 0.45;
}

.ecp-panel-body {
  border-top: 1px solid var(--md-outline-variant);
  padding: 4px var(--sp-sm) var(--sp-sm);
}

.ecp-station-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  font-size: 0.76rem;
  border-bottom: 1px solid var(--md-outline-variant);
}

.ecp-station-item:last-child { border-bottom: none; }

.ecp-station-type {
  font-weight: 500;
  color: var(--md-on-surface-variant);
  flex: 1;
}

.ecp-station-ip {
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--md-on-surface-variant);
  opacity: 0.65;
}

.ecp-station-age {
  font-size: 0.72rem;
  color: var(--md-on-surface-variant);
  opacity: 0.45;
  min-width: 36px;
  text-align: right;
}

.ecp-empty {
  text-align: center;
  color: var(--md-on-surface-variant);
  opacity: 0.4;
  padding: 8px 4px;
  font-size: 0.78rem;
}

.impulse-empty {
  text-align: center;
  color: var(--md-on-surface-variant);
  opacity: 0.4;
  padding: var(--sp-md);
  font-size: 0.85rem;
}

.impulse-list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  margin-bottom: 4px;
}

.impulse-time {
  font-family: 'Roboto Mono', monospace, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
  flex-shrink: 0;
}

.impulse-race-select {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  padding: 3px 6px;
  cursor: pointer;
}

.impulse-list-item--assigned {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
}

.impulse-assigned-label {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--md-on-primary-container);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.impulse-unassign-btn {
  flex-shrink: 0;
  color: var(--md-on-surface-variant);
}

.impulse-unassign-btn .material-icons-round {
  font-size: 16px;
}


/* Finishing panel toolbar */
.finishing-panel-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 6px 8px;
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
  flex-shrink: 0;
}

.finishing-clear-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--md-error);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--md-error);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.finishing-clear-btn:hover {
  background: var(--md-error-container);
}

.finishing-clear-btn .material-icons-round {
  font-size: 14px;
}

/* Finish times list */
.timing-finishing-footer {
  flex-shrink: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--md-outline-variant);
}

.finishing-save-btn {
  width: 100%;
  justify-content: center;
}

.finish-time-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  margin: 4px;
}

.finish-seq {
  font-size: 0.72rem;
  color: var(--md-on-surface-variant);
  min-width: 16px;
  flex-shrink: 0;
  text-align: right;
}

.finish-time-val {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
  flex-shrink: 0;
}

.finish-id-input {
  width: 3.5em;
  flex-shrink: 0;
  font-size: 0.82rem;
  font-family: 'Roboto Mono', monospace;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  padding: 2px 4px;
}
.finish-id-input:focus { outline: 2px solid var(--md-primary); border-color: var(--md-primary); }
.finish-id-input.invalid { border-color: var(--md-error); color: var(--md-error); }
.finish-crew-label { flex: 1; min-width: 0; font-size: 0.75rem; color: var(--md-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finish-crew-label.invalid { color: var(--md-error); }
/* keep selector name for compat */
.finish-id-select {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  padding: 2px 4px;
  cursor: pointer;
}

/* ── Crew Photos button ── */
.crew-photos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--md-primary-container, #d0e4ff);
  color: var(--md-on-primary-container, #001d36);
  cursor: pointer;
  padding: 0;
}
.crew-photos-btn .material-icons-round { font-size: 22px; }

/* ── Crew Photos Overlay ── */
.crew-photos-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 9500;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.crew-photos-overlay.hidden { display: none; }

.crew-photos-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.crew-photos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  gap: 12px;
}
.crew-photos-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crew-photos-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.crew-photos-close .material-icons-round { font-size: 26px; }

.crew-photos-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
  /* columns/rows set dynamically by JS */
}

.crew-photo-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.crew-photo-img-wrap {
  flex: 1;
  min-height: 0;
  background: #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crew-photo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.crew-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}
.crew-photo-placeholder .material-icons-round { font-size: 72px; }
.crew-photo-name {
  flex-shrink: 0;
  margin-top: 5px;
  text-align: center;
  font-size: 11px;
  color: #ccc;
  line-height: 1.3;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}