:root {
  --font-body: "Nunito Sans", "Segoe UI", sans-serif;
  --font-display: "Bree Serif", Georgia, serif;
  --bg: #f7f2ff;
  --bg-strong: #efe2ff;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-solid: #ffffff;
  --surface-alt: #f8f3ff;
  --line: #d9c9f3;
  --line-strong: #b99ded;
  --text: #190d29;
  --muted: #5e5272;
  --brand: #7413dc;
  --brand-strong: #4f0aa1;
  --brand-soft: #ead9ff;
  --accent: #00a794;
  --accent-soft: #c8f4ee;
  --danger: #e22e12;
  --warning: #ffe627;
  --navy: #003982;
  --pink: #ffb4e5;
  --green: #23a950;
  --shadow-lg: 0 18px 40px rgba(74, 20, 122, 0.14);
  --shadow-sm: 0 8px 20px rgba(74, 20, 122, 0.08);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(circle at top left, rgba(116, 19, 220, 0.14), transparent 28%),
    radial-gradient(circle at top right, rgba(0, 167, 148, 0.16), transparent 30%),
    linear-gradient(180deg, #faf7ff 0%, #f2ebff 44%, #ffffff 100%);
  color: var(--text);
}

body {
  min-height: 100vh;
}

#app-header {
  position: relative;
  padding: 1.5rem clamp(1rem, 2vw, 2rem) 1.2rem;
  background:
    linear-gradient(135deg, rgba(79, 10, 161, 0.98), rgba(116, 19, 220, 0.94) 54%, rgba(0, 167, 148, 0.9)),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
  color: #fefcf6;
  box-shadow: var(--shadow-lg);
}

#app-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg, var(--warning), #ffffff, var(--accent));
}

.header-content {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.app-branding {
  max-width: 46rem;
}

.app-kicker {
  margin: 0 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  font-weight: 800;
  color: #ffe9a0;
}

#app-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

.app-subtitle {
  margin: 0.6rem 0 0;
  max-width: 44rem;
  color: rgba(255, 252, 246, 0.86);
  font-size: 1rem;
  line-height: 1.55;
}

#competition-bar {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: center;
  width: min(100%, 34rem);
  padding: 0.8rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

#competition-bar label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  grid-column: 1;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f4e7be;
}

#app-overview {
  max-width: 1400px;
  margin: 1.1rem auto 0;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(150px, 1fr));
  gap: 0.85rem;
}

.overview-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245, 237, 255, 0.96));
  border: 1px solid rgba(185, 157, 237, 0.45);
  border-radius: 20px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}

.overview-card-primary {
  background: linear-gradient(135deg, rgba(79, 10, 161, 0.98), rgba(116, 19, 220, 0.95) 56%, rgba(0, 167, 148, 0.86));
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}

.overview-label {
  margin: 0 0 0.45rem;
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--muted);
}

.overview-card-primary .overview-label,
.overview-card-primary .overview-meta,
.overview-card-primary h2 {
  color: #fff;
}

.overview-card h2,
.overview-value {
  margin: 0;
  font-family: var(--font-display);
}

.overview-card h2 {
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.overview-value {
  font-size: 2rem;
  color: var(--brand-strong);
}

.overview-meta {
  margin: 0.35rem 0 0;
  color: var(--muted);
  line-height: 1.4;
}

#competition-bar select,
#competition-bar button {
  font-size: 0.95rem;
}

#competition-bar select {
  grid-column: 2 / 5;
  width: 100%;
  min-width: 0;
}

#competition-bar button {
  width: 100%;
  min-width: 0;
  min-height: 2.2rem;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}

.app-guide {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.guide-step {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.14);
  border: 1px solid rgba(255, 253, 248, 0.16);
  color: #fff9ef;
  font-size: 0.88rem;
  line-height: 1.2;
}

#tabs {
  max-width: 1400px;
  margin: 1rem auto 2rem;
  padding: 0 1rem;
  background: transparent;
  border: 0;
}

#tabs .ui-tabs-nav {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.45rem 0 0.55rem;
  margin: 0 0 1.15rem;
  background: transparent;
  border: 0;
}

#tabs .ui-tabs-nav li {
  border: 0;
  background: transparent;
  margin: 0.1rem 0;
}

#tabs .ui-tabs-nav .ui-tabs-anchor {
  float: none;
  padding: 0.8rem 1.05rem;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(185, 168, 130, 0.5);
  color: var(--brand-strong);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-sm);
}

#tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
#tabs .ui-tabs-nav .ui-tabs-anchor:hover {
  background: linear-gradient(180deg, #f2e8ff 0%, #dcc5ff 100%);
  border-color: rgba(116, 19, 220, 0.45);
  color: var(--brand-strong);
}

#tabs .ui-tabs-panel {
  padding: 1.4rem;
  border-radius: 26px;
  border: 1px solid rgba(185, 157, 237, 0.36);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 243, 255, 0.98));
  box-shadow: var(--shadow-lg);
}

section h2 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--brand-strong);
}

.section-lead {
  max-width: 60rem;
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

fieldset {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid rgba(185, 157, 237, 0.35);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248, 243, 255, 0.96));
  box-shadow: var(--shadow-sm);
}

fieldset legend {
  padding: 0 0.55rem;
  font-weight: 800;
  color: var(--brand-strong);
}

.hint {
  color: var(--muted);
  font-size: 0.94rem;
  margin: 0.35rem 0 0.75rem;
  line-height: 1.45;
}

table.data-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 0.5rem;
  background: var(--surface-solid);
  border: 1px solid rgba(185, 157, 237, 0.32);
  border-radius: 14px;
  overflow: hidden;
}

table.data-table th,
table.data-table td {
  padding: 0.6rem 0.75rem;
  border-right: 1px solid rgba(217, 208, 189, 0.7);
  border-bottom: 1px solid rgba(217, 208, 189, 0.7);
  text-align: left;
  vertical-align: top;
}

table.data-table th:last-child,
table.data-table td:last-child {
  border-right: 0;
}

table.data-table tr:last-child td {
  border-bottom: 0;
}

table.data-table th {
  background: linear-gradient(180deg, #f3ebff 0%, #e7d7ff 100%);
  color: #43236f;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

label {
  display: block;
  margin: 0.45rem 0;
  color: var(--text);
  font-weight: 700;
}

label input[type="text"],
label input[type="number"],
label input[type="date"],
label input[type="time"],
label select {
  margin-left: 0.4rem;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea,
form input[type="text"],
form input[type="number"],
form select {
  width: min(100%, 20rem);
  padding: 0.62rem 0.78rem;
  border: 1px solid rgba(157, 144, 116, 0.7);
  border-radius: 12px;
  background: #fffdf8;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(116, 19, 220, 0.72);
  box-shadow: 0 0 0 4px rgba(116, 19, 220, 0.14);
  background: #ffffff;
}

button,
.ui-dialog .ui-dialog-buttonpane button {
  appearance: none;
  border: 1px solid rgba(62, 6, 131, 0.22);
  border-radius: 999px;
  min-height: 2.5rem;
  padding: 0.56rem 0.9rem;
  background: linear-gradient(180deg, #8c35eb 0%, #7413dc 100%);
  color: #fffdf8;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(116, 19, 220, 0.18);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

button#btn-load-sample,
.btn-add-break,
.btn-enter-results,
#btn-toggle-entries-lock {
  background: linear-gradient(180deg, #0dc2ab 0%, #00a794 100%);
  box-shadow: 0 8px 18px rgba(0, 167, 148, 0.2);
}

button:hover,
.ui-dialog .ui-dialog-buttonpane button:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

button:active,
.ui-dialog .ui-dialog-buttonpane button:active {
  transform: translateY(0);
}

.danger {
  color: var(--danger);
}

button.danger {
  color: #fff7f4;
  background: linear-gradient(180deg, #a64646 0%, #8b2f2f 100%);
  box-shadow: 0 8px 18px rgba(139, 47, 47, 0.18);
}

button.small { font-size: 0.8rem; padding: 0.42rem 0.74rem; }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250, 246, 238, 0.95));
  border: 1px solid rgba(185, 168, 130, 0.38);
  border-radius: 18px;
  padding: 1rem 1.05rem;
  margin-bottom: 0.9rem;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.card-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--brand-strong);
}

.card-body { margin-top: 0.7rem; }
.card-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

details {
  border: 1px solid rgba(185, 157, 237, 0.28);
  border-radius: 14px;
  background: rgba(248, 243, 255, 0.9);
  padding: 0.65rem 0.8rem;
}

.help-panel {
  margin: 0 0 0.9rem;
}

.help-panel p {
  margin: 0.6rem 0 0;
  color: var(--muted);
  line-height: 1.5;
}

details summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--brand-strong);
}

.ui-dialog {
  border: 1px solid rgba(185, 168, 130, 0.5);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.ui-dialog.app-dialog {
  max-width: calc(100vw - 1.5rem) !important;
  max-height: calc(100vh - 1.5rem);
  display: flex;
  flex-direction: column;
}

.ui-dialog.app-dialog-wide {
  width: min(94vw, 48rem) !important;
}

.ui-dialog.app-dialog-compact {
  width: min(92vw, 24rem) !important;
}

.ui-dialog .ui-dialog-titlebar {
  border: 0;
  background: linear-gradient(135deg, var(--brand-strong), var(--brand), var(--accent));
  color: #fffdf8;
  border-radius: 24px 24px 0 0;
  padding: 1rem 4.25rem 0.95rem 1.25rem;
  min-height: 4rem;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.ui-dialog .ui-dialog-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  width: 2.35rem;
  height: 2.35rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0;
  text-indent: 0;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: none;
  filter: none;
}

.ui-dialog .ui-dialog-titlebar-close:active {
  background: rgba(255, 255, 255, 0.3);
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  display: none;
}

.ui-dialog .ui-dialog-titlebar-close::before {
  content: "\00d7";
  color: rgba(255, 253, 248, 0.98);
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(42, 14, 89, 0.3);
}

.ui-dialog .ui-dialog-content {
  flex: 1 1 auto;
  padding: 1rem 1.1rem;
  background: #fffdf8;
  border-top: 1px solid rgba(185, 157, 237, 0.2);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ui-dialog .ui-dialog-buttonpane {
  border: 0;
  border-top: 1px solid rgba(185, 157, 237, 0.18);
  padding: 0.4rem 1rem 1rem;
  background: #fffdf8;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0;
}

.ui-widget {
  font-family: var(--font-body);
}

.no-data {
  color: var(--muted);
  font-style: italic;
  padding: 0.8rem;
  background: rgba(240, 233, 212, 0.55);
  border: 1px dashed rgba(185, 168, 130, 0.55);
  border-radius: 14px;
}

.muted { color: var(--muted); }

/* =============================================================
   MOBILE & RESPONSIVE STYLES
   ============================================================= */

/* --- General mobile touch sizing --- */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    width: 100%;
    font-size: 1rem;
    min-height: 2.75rem;
  }

  button {
    min-height: 2.75rem;
    font-size: 0.95rem;
    padding: 0.5rem 0.9rem;
  }

  /* Allow the filter selects to be shorter (touch-friendly but not huge) */
  .schedule-filters select {
    min-height: 3rem;
    height: auto;
  }

  /* Prevent oversized multi-selects on mobile */
  .schedule-filters select[size] {
    height: auto;
    max-height: 6rem;
  }

  .app-guide {
    display: none;
  }

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

  .card-actions {
    width: 100%;
  }

  .card-actions button {
    flex: 1;
  }

  .guide-step {
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem;
  }

  .ui-dialog.app-dialog {
    min-width: 0 !important;
    width: calc(100vw - 0.5rem) !important;
    max-height: calc(100vh - 0.5rem);
  }

  .ui-dialog.app-dialog-wide,
  .ui-dialog.app-dialog-compact {
    width: calc(100vw - 0.5rem) !important;
  }

  .ui-dialog .ui-dialog-content {
    padding: 0.7rem 0.8rem;
  }

  .ui-dialog .ui-dialog-titlebar {
    padding: 0.75rem 3.5rem 0.75rem 0.9rem;
    min-height: 3.2rem;
  }

  .ui-dialog .ui-dialog-buttonpane {
    padding: 0.4rem 0.8rem 0.8rem;
  }

  .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    flex-direction: column;
  }

  .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
    width: 100%;
  }

  .ui-dialog .ui-dialog-titlebar-close {
    width: 2.6rem;
    height: 2.6rem;
    top: 0.55rem;
    right: 0.6rem;
  }

  #tabs .ui-tabs-nav li .ui-tabs-anchor {
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
  }

  table.data-table th,
  table.data-table td {
    padding: 0.45rem 0.5rem;
    font-size: 0.85rem;
  }

  .overview-card {
    padding: 0.75rem 0.85rem;
  }

  .overview-value {
    font-size: 1.5rem;
  }

  fieldset {
    padding: 0.75rem 0.8rem;
  }

  .day-block {
    padding: 0.6rem 0.7rem;
  }

  section h2 {
    font-size: 1.5rem;
  }

  .schedule-print-controls {
    margin-left: 0;
    width: 100%;
  }

  .schedule-print-controls select {
    min-width: 0;
    width: 100%;
  }

  .schedule-print-controls .schedule-print-toggle {
    flex: 1;
  }

  /* Results table horizontal scroll */
  #results-list .data-table-wrap,
  .placings-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #results-list table.data-table {
    min-width: 600px;
  }

  /* Diagram stages stack vertically */
  .diagram-flow {
    flex-direction: column;
  }

  .diagram-arrow {
    transform: rotate(90deg);
    padding: 0.3rem 0;
  }

  .diagram-stage {
    min-width: 0;
    width: 100%;
  }

  .diagram-node {
    min-width: 0;
  }

  /* Entry dialog crew list */
  #entry-crew-list label {
    flex-direction: column;
    align-items: flex-start;
  }

  #entry-crew-list label select,
  #entry-crew-list label input {
    width: 100%;
    margin-left: 0;
  }

  /* Team roster table */
  #team-roster-table {
    min-width: 400px;
  }

  #dialog-team .data-table-wrap {
    overflow-x: auto;
  }

  /* Model simulator form */
  #rm-form label {
    flex-direction: column;
    align-items: flex-start;
  }

  #rm-form label input,
  #rm-form label select {
    width: 100%;
    margin-left: 0;
    margin-top: 0.3rem;
  }

  /* Print controls on schedule toolbar */
  #schedule-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #schedule-toolbar > button {
    width: 100%;
  }

  /* Override standalone label-input rows */
  label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  label input[type="text"],
  label input[type="number"],
  label input[type="date"],
  label input[type="time"],
  label select {
    width: 100%;
    margin-left: 0;
    margin-top: 0.25rem;
  }

  /* Inline labels in schedule-print-controls */
  .schedule-print-controls label {
    flex-direction: row;
    align-items: center;
  }

  /* Age categories table */
  #age-categories-table {
    min-width: 400px;
  }

  #age-categories-table-wrap {
    overflow-x: auto;
  }

  /* Race point values table */
  #race-point-values-table {
    min-width: 300px;
  }

  /* Day times table */
  #day-times-table table.data-table {
    min-width: 400px;
  }

  #day-times-table {
    overflow-x: auto;
  }

  #day-times-table label {
    flex-direction: row;
    align-items: center;
  }

  #day-times-table label input {
    width: auto;
    margin-left: 0.4rem;
    margin-top: 0;
  }
}

/* --- Small phones --- */
@media (max-width: 480px) {
  #app-header {
    padding: 1rem 0.75rem 0.8rem;
  }

  #app-header h1 {
    font-size: 1.6rem;
  }

  .app-subtitle {
    font-size: 0.85rem;
    margin: 0.4rem 0 0;
  }

  .app-kicker {
    font-size: 0.65rem;
  }

  #competition-bar {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.5rem;
    border-radius: 14px;
  }

  #competition-bar label,
  #competition-bar select,
  #competition-bar button {
    grid-column: 1;
  }

  #competition-bar select {
    min-height: 2.5rem;
  }

  #competition-bar button {
    min-height: 2.3rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
  }

  #app-overview {
    grid-template-columns: 1fr;
    padding: 0 0.7rem;
    gap: 0.6rem;
  }

  .overview-card-primary {
    grid-column: 1;
  }

  #tabs {
    padding: 0 0.5rem;
    margin: 0.6rem auto 1.5rem;
  }

  #tabs .ui-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.4rem;
    padding: 0.35rem 0 0.45rem;
    margin-bottom: 0.7rem;
  }

  #tabs .ui-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  #tabs .ui-tabs-nav li {
    flex-shrink: 0;
  }

  #tabs .ui-tabs-nav li .ui-tabs-anchor {
    padding: 0.5rem 0.65rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  #tabs .ui-tabs-panel {
    padding: 0.7rem;
    border-radius: 16px;
  }

  section h2 {
    font-size: 1.3rem;
  }

  .section-lead {
    font-size: 0.88rem;
    margin-bottom: 0.7rem;
  }

  .card {
    padding: 0.7rem 0.75rem;
  }

  .card-header h3 {
    font-size: 1rem;
  }

  table.data-table th,
  table.data-table td {
    padding: 0.35rem 0.4rem;
    font-size: 0.78rem;
  }

  .overview-value {
    font-size: 1.3rem;
  }

  .overview-label {
    font-size: 0.7rem;
  }

  button {
    min-height: 2.3rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.7rem;
  }

  .data-table-wrap,
  .schedule-table-wrap {
    border-radius: 10px;
  }

  .entries-matrix .event-col {
    min-width: 10rem;
  }

  .entries-team-head,
  .entry-cell {
    min-width: 7rem;
  }

  .entries-matrix {
    min-width: 0;
  }

  /* Heat entry dialog inputs on mobile */
  .heat-entry input[type="number"],
  .heat-entry input[type="text"] {
    width: 100%;
  }

  .heat-block {
    padding: 0.3rem 0.4rem;
  }

  .schedule-table input[type="time"] {
    width: 5.5rem;
    font-size: 0.8rem;
  }

  .schedule-table input[type="number"] {
    width: 4rem;
    font-size: 0.8rem;
  }

  .schedule-table th,
  .schedule-table td {
    padding: 0.3rem 0.35rem;
    font-size: 0.78rem;
  }

  .reorder-handle {
    min-width: 1.5rem;
    height: 1.3rem;
    font-size: 0.75rem;
  }

  /* Dialogs near full-screen on tiny phones */
  .ui-dialog.app-dialog {
    width: 100vw !important;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
  }

  .ui-dialog .ui-dialog-titlebar {
    border-radius: 0;
    padding: 0.65rem 3rem 0.65rem 0.75rem;
  }

  .ui-dialog .ui-dialog-content {
    padding: 0.6rem;
  }

  .ui-dialog .ui-dialog-buttonpane {
    padding: 0.3rem 0.6rem 0.6rem;
  }

  .ui-dialog .ui-dialog-titlebar-close {
    top: 0.4rem;
    right: 0.5rem;
    width: 2.4rem;
    height: 2.4rem;
  }

  /* Day times inputs */
  .day-time-row input[type="time"] {
    width: 100%;
  }

  .schedule-filters {
    padding: 0.5rem 0.6rem;
  }

  #schedule-toolbar {
    gap: 0.35rem;
  }
}

/* --- Tablet / small desktop adjustments --- */
@media (max-width: 900px) {
  .entries-matrix .event-col {
    position: static;
  }

  #competition-bar {
    grid-template-columns: 1fr 1fr;
  }

  #competition-bar label {
    grid-column: 1 / -1;
  }

  #competition-bar select {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  #app-header {
    padding-bottom: 0.8rem;
  }

  .header-content {
    flex-direction: column;
  }

  #competition-bar {
    width: 100%;
  }

  #competition-bar button,
  #competition-bar select {
    width: 100%;
  }

  #tabs {
    padding: 0 0.5rem;
  }

  #tabs .ui-tabs-panel {
    padding: 0.8rem;
    border-radius: 18px;
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #efe5ff;
  color: var(--brand-strong);
  border: 1px solid rgba(116, 19, 220, 0.12);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  margin-right: 0.28rem;
  margin-bottom: 0.3rem;
}

.tag.warn { background: #fff7b8; color: #6a5d00; border-color: rgba(255, 230, 39, 0.5); }
.tag.error { background: #ffd9d3; color: #8b2711; border-color: rgba(226, 46, 18, 0.3); }
.tag.ok { background: #d9f7ef; color: #005f54; border-color: rgba(0, 167, 148, 0.25); }

/* Placeholder chips — shown in Lanes column and dialogs before results are entered */
.chip {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: 1em;
  background: #efe8ff;
  color: var(--navy);
  font-size: 0.8rem;
  border: 1px solid #c9b2f2;
  font-weight: 500;
  white-space: nowrap;
}
/* Race number badge next to heat name in schedule rows */
.race-num {
  display: inline-block;
  padding: 0.05em 0.4em;
  border-radius: 0.8em;
  background: #efe8ff;
  color: #513080;
  font-size: 0.75rem;
  border: 1px solid #c2c8cf;
  margin-left: 0.3em;
}
/* Race number first column cell */
td.race-num-cell {
  text-align: center;
  font-size: 0.84rem;
  font-weight: 700;
  color: #52606d;
  width: 3rem;
}
/* Results button — amber when results are still needed */
button.needs-results {
  background: linear-gradient(180deg, #fff58c, #ffe627);
  border-color: #d8bc00;
  color: #4c4100;
}
button.needs-results:hover {
  background: linear-gradient(180deg, #fff9a9, #ffea4f);
}

.lane-cell {
  min-width: 0;
  font-weight: 600;
  padding: 0.2rem 0.35rem;
}

.lane-cell-inner {
  min-height: 2.1rem;
  border-radius: 6px;
  padding: 0.28rem 0.35rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1.25;
}

.lane-cell.lane-yellow {
  background: #fff9c4;
}

.lane-cell.lane-pink {
  background: #ffd8f0;
}

.lane-cell.lane-green {
  background: #d9f3df;
}

.lane-cell.lane-empty {
  color: #8a94a6;
  font-weight: 400;
}
.lane-cell .chip {
  white-space: normal;
  line-height: 1.2;
}
.tag.ok { background: #d4edda; color: #155724; }

.violation { color: #8b1b1b; }
.note { color: #52606d; font-style: italic; }

.heat-block {
  border: 1px dashed #b79ce8;
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.4rem;
  background: #fcf9ff;
}
.heat-entry { padding: 0.15rem 0; }
.heat-entry input[type="number"], .heat-entry input[type="text"] { width: 6rem; }

.flex-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.danger { color: var(--danger); }

.schedule-print-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.schedule-print-controls label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.schedule-print-controls select {
  min-width: 10rem;
  width: auto;
  padding: 0.45rem 0.65rem;
}

.schedule-print-controls .schedule-print-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.schedule-print-controls .schedule-print-toggle input {
  margin: 0;
}

.placings-table th, .placings-table td { text-align: left; }
.placings-table .place { font-weight: 700; width: 3rem; }

.btn-print-certs {
  white-space: nowrap;
}

#results-certificate-print-root {
  display: none;
}

.certificate-print-root {
  display: none;
}

.certificate-page {
  width: 297mm;
  min-height: 210mm;
  padding: 16mm;
  margin: 0 auto;
  background: #fff;
  color: #000;
  box-sizing: border-box;
  page-break-after: always;
  break-after: page;
}

.certificate-page:last-child {
  page-break-after: auto;
  break-after: auto;
}

.certificate-card {
  width: 100%;
  min-height: calc(210mm - 32mm);
  border: 2px solid #000;
  padding: 14mm;
  box-sizing: border-box;
}

.certificate-competition-title,
.certificate-position,
.certificate-main-name,
.certificate-team-name,
.certificate-event-title {
  margin: 0 0 5mm;
  text-align: center;
}

.certificate-competition-title {
  font-size: 8mm;
  font-weight: 700;
}

.certificate-position {
  font-size: 10mm;
  font-weight: 800;
}

.certificate-main-name {
  font-size: 12mm;
  font-weight: 800;
}

.certificate-team-name {
  font-size: 6mm;
  font-weight: 600;
}

.certificate-event-title {
  margin-top: 12mm;
  font-size: 7mm;
  font-weight: 700;
}

.muted { color: var(--muted); }
.no-data {
  color: var(--muted);
  font-style: italic;
  padding: 0.8rem;
  background: rgba(240, 233, 212, 0.55);
  border: 1px dashed rgba(185, 168, 130, 0.55);
  border-radius: 14px;
}

button.small { font-size: 0.8rem; padding: 0.42rem 0.74rem; }

.entries-matrix-wrap {
  overflow-x: auto;
  border: 1px solid #d8ccf0;
  border-radius: 8px;
  background: #fff;
}

.entries-matrix {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
}

.entries-matrix th,
.entries-matrix td {
  border: 1px solid #d9e2ec;
  padding: 0.5rem;
  vertical-align: top;
}

.entries-matrix thead th {
  background: #efe5ff;
}

.entries-matrix .event-col {
  min-width: 15rem;
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fbf8ff;
}

.entries-matrix thead .event-col {
  z-index: 2;
  background: #efe5ff;
}

.entries-team-head {
  min-width: 10rem;
}

.entries-team-name {
  font-weight: 600;
}

.entries-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #52606d;
}

.entry-cell {
  min-width: 10rem;
}

.entry-cell label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.entry-cell-main {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.entry-cell-meta {
  margin-top: 0.3rem;
  font-size: 0.82rem;
  line-height: 1.35;
}

.entry-cell-meta .violation,
.entry-cell-meta .muted {
  margin: 0;
}

.entry-cell-empty {
  color: #8a94a6;
  font-size: 0.82rem;
}

@media (max-width: 900px) {
  .entries-matrix .event-col {
    position: static;
  }
}

/* Race-model diagram */
.diagram-wrap { margin-top: 0.7rem; padding-top: 0.5rem; border-top: 1px dashed #d2d6dc; }
.diagram-flow {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.3rem 0;
}
.diagram-stage {
  display: flex;
  flex-direction: column;
  min-width: 9rem;
}
.diagram-stage-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #52606d;
  margin-bottom: 0.3rem;
  letter-spacing: 0.5px;
}
.diagram-nodes {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  justify-content: center;
}
.diagram-node {
  background: #eef3f8;
  border: 1px solid #b8c4d1;
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  text-align: center;
  min-width: 8rem;
}
.diagram-node-heat { background: #e7f1ff; border-color: #84a9d1; }
.diagram-node-race { background: #f3ecff; border-color: #c8b0f0; }
.diagram-node-final { background: #dff9f4; border-color: #6dd4c5; font-weight: 600; }
.diagram-node-empty { background: transparent; border-style: dashed; color: #94a3b8; }
.diagram-node-rowover { background: #fff1c2; border-color: #d6b94a; border-style: dashed; }
.diagram-node-sub { font-size: 0.72rem; color: #52606d; margin-top: 0.15rem; }
.diagram-arrow {
  align-self: center;
  font-size: 1.4rem;
  color: #6b7785;
  padding: 0 0.2rem;
}
.diagram-note { color: #6b7785; font-size: 0.8rem; font-style: italic; margin-top: 0.3rem; }
.rm-stats { margin-bottom: 0.7rem; }
.rm-stats .tag { font-size: 0.9rem; }

/* Schedule */
.day-block { background: #fff; border: 1px solid #d8ccf0; border-radius: 16px; padding: 0.9rem 1rem; margin-bottom: 0.9rem; box-shadow: var(--shadow-sm); }
.day-block h3 { margin-top: 0; }
.schedule-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.7rem;
  border: 1px solid #d8ccf0;
  border-radius: 14px;
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
  box-shadow: var(--shadow-sm);
}
.schedule-filters label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #553486;
}
.schedule-filters select {
  min-width: 13rem;
  min-height: 6.5rem;
}
.schedule-filters button {
  margin-left: auto;
}
.schedule-filters-hint {
  margin: 0;
  width: 100%;
  font-size: 0.78rem;
}
.schedule-table-wrap { overflow-x: auto; overflow-y: visible; border: 1px solid #d8ccf0; border-radius: 14px; background: linear-gradient(180deg, #faf5ff 0%, #ffffff 28%); }
.schedule-table { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; table-layout: auto; }
.schedule-table th, .schedule-table td { padding: 0.4rem 0.45rem; border-right: 1px solid #e6dcf7; border-bottom: 1px solid #e6dcf7; text-align: left; vertical-align: top; }
.schedule-table thead th { background: #efe5ff; position: sticky; top: 0; z-index: 1; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: #553486; white-space: nowrap; }
.schedule-table,
.schedule-table th,
.schedule-table td,
.schedule-table input,
.schedule-table select,
.schedule-table button {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.83rem;
}
.schedule-table thead th:first-child,
.schedule-table tbody td:first-child { border-left: 0; }
.schedule-table thead tr:first-child th { border-top: 0; }
.schedule-table tbody tr:last-child td { border-bottom: 0; }
.schedule-table input[type="time"] { width: 6.2rem; }
.schedule-table input[type="number"] { width: 5rem; }
.schedule-table .row-final { background: #f1fcf8; }
.schedule-table .row-heat { background: #fcfaff; }
.schedule-row-event { font-weight: 600; line-height: 1.3; }
.schedule-row-heat { color: #475569; line-height: 1.3; }
.schedule-dest,
.schedule-result { font-size: 0.82rem; line-height: 1.35; }
.schedule-result { font-weight: 600; }
.schedule-action { text-align: center; white-space: nowrap; }
.schedule-table .reorder-cell { white-space: nowrap; text-align: center; }
.race-num-wrap {
  position: relative;
  min-height: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.race-num-label {
  display: inline-block;
  min-width: 1.8rem;
  pointer-events: none;
}
.race-num-wrap .reorder-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reorder-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.45rem;
  border: 1px solid #d8ccf0;
  border-radius: 999px;
  background: rgba(248, 251, 255, 0.98);
  color: #6b4aa6;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: grab;
  user-select: none;
}
.row-dragging .reorder-handle,
.reorder-handle:active {
  cursor: grabbing;
}
.schedule-drop-placeholder td {
  background: #f0f9ff;
  border-top: 2px dashed #38bdf8;
  border-bottom: 2px dashed #38bdf8;
}
.schedule-row-heat {
  white-space: normal;
}
.race-type-abbrev {
  display: inline-flex;
  min-width: 2rem;
  justify-content: center;
  align-items: center;
  padding: 0.1rem 0.35rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  background: #efe5ff;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.race-name-detail {
  color: #475569;
}
.add-break-row { margin-top: 0.5rem; }
.add-break-row .btn-add-break { border: 1px dashed rgba(0, 167, 148, 0.4); color: #fff; }
.add-break-row .btn-add-break:hover { filter: brightness(1.05); }

@media (max-width: 1100px) {
  #app-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-card-primary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  #competition-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #competition-bar label,
  #competition-bar select {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1200px) {
  .day-block { padding: 0.65rem 0.7rem; }
  .schedule-table { min-width: 0; }
}

@media (max-width: 720px) {
  .schedule-filters {
    align-items: stretch;
  }

  .schedule-filters label,
  .schedule-filters select,
  .schedule-filters button {
    width: 100%;
  }

  .schedule-filters button {
    margin-left: 0;
  }
}

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  body {
    background: #fff;
    color: #000;
  }

  body.print-certificates > *:not(#results-certificate-print-root) {
    display: none !important;
  }

  body.print-certificates #results-certificate-print-root {
    display: block !important;
  }

  body.print-certificates .certificate-print-root {
    display: block !important;
  }

  #app-header,
  #app-overview,
  #tabs .ui-tabs-nav,
  #competition-bar,
  .app-guide,
  .section-lead,
  .help-panel,
  button,
  input,
  select,
  .reorder-cell,
  .schedule-action,
  .add-break-row {
    display: none !important;
  }

  body.print-certificates #app-header,
  body.print-certificates #app-overview,
  body.print-certificates #tabs,
  body.print-certificates .section-lead,
  body.print-certificates .help-panel,
  body.print-certificates button,
  body.print-certificates input,
  body.print-certificates select {
    display: none !important;
  }

  #tabs,
  #tabs .ui-tabs-panel,
  .card,
  .day-block,
  fieldset,
  .schedule-table-wrap,
  .entries-matrix-wrap {
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: 0;
    background: #fff;
  }

  #tab-results,
  #tab-schedule {
    display: block !important;
  }

  table.data-table,
  .schedule-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  table.data-table th,
  table.data-table td,
  .schedule-table th,
  .schedule-table td {
    border-color: #000;
    background: #fff !important;
    color: #000 !important;
  }

  .tag,
  .chip,
  .race-type-abbrev,
  .race-num {
    border: 1px solid #000;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none;
  }
}