:root {
  --bg: #fff;
  --fg: #222;
  --muted: #666;
  --accent: #0b57d0;
  --table-border: #e6e6e6;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}

.diagnostic-mode-notice {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 950;
  max-width: min(420px, calc(100vw - 24px));
  padding: 10px 14px;
  border: 1px solid #b88624;
  border-radius: 9px;
  color: #4f3b14;
  background: #fff4d6;
  box-shadow: 0 8px 24px rgba(55, 42, 15, 0.16);
  font-size: 0.88rem;
  font-weight: 650;
}

/* -------------------------------------------------- */
/*  LOGIN MODAL                                        */
/* -------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #fff;
  padding: 24px;
  border-radius: 10px;
  width: min(100%, 360px);
  max-width: 360px;
  max-height: 100%;
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  animation: fadeIn 0.25s ease;
}

.modal-content h2 {
  margin-top: 0;
  text-align: center;
  color: var(--accent);
}

.modal-content label {
  display: block;
  margin-top: 12px;
  font-weight: 500;
}

.modal-content input,
.modal-content select {
  width: 100%;
  padding: 8px 10px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
}

.login-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #c62828;
  border-radius: 6px;
  color: #8e1616;
  background: #fff0f0;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.login-status[hidden] {
  display: none;
}

.password-manager-username {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#resetProofValue {
  display: block;
  margin: 16px 0;
  padding: 10px;
  border-radius: 6px;
  background: #f3f5f8;
  overflow-wrap: anywhere;
  user-select: all;
}

.name-display {
  display: inline-block;
  font-weight: 700;
  color: #0b57d0;
  background: #e8efff;
  border: 1px solid #bed3ff;
  border-radius: 8px;
  padding: 3px 8px;
  margin: 6px 0 12px 0;
}

.name-display.demanded {
  font-size: 1.2rem;
  padding: 6px 14px;
  font-weight: 800;
}

.profile-field {
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-field > strong {
  flex-shrink: 0;
}

.profile-field-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-copy-button {
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: 1px solid #c5cad3;
  border-radius: 6px;
  color: #465266;
  background: #f7f8fa;
  cursor: pointer;
}

.profile-copy-button:hover,
.profile-copy-button:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: #eef4ff;
}

.profile-copy-icon::before,
.profile-copy-icon::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.profile-copy-icon::before {
  top: 7px;
  left: 7px;
}

.profile-copy-icon::after {
  top: 10px;
  left: 10px;
  background: #f7f8fa;
}

.profile-copy-button:hover .profile-copy-icon::after,
.profile-copy-button:focus-visible .profile-copy-icon::after {
  background: #eef4ff;
}

.profile-modal {
  padding-top: max(20px, env(safe-area-inset-top));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  overflow: hidden;
}

.profile-dialog {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  width: min(100%, 560px);
  max-width: 560px;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
}

.profile-dialog > h2 {
  min-width: 0;
  margin: 0;
  padding: 24px 56px 18px;
  overflow-wrap: anywhere;
}

.profile-tabs {
  display: flex;
  min-width: 0;
  padding: 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid #e1e5eb;
  border-bottom: 1px solid #d6dbe3;
  background: #f7f8fa;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.profile-tabs[hidden] {
  display: none;
}

.profile-competition-tabs {
  border-top: 0;
  background: #fff;
}

.profile-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 14px 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #4a5568;
  background: transparent;
  font: inherit;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.profile-tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: #fff;
}

.profile-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.profile-body {
  grid-row: 4;
  min-height: 0;
  padding: 20px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.profile-panel[hidden] {
  display: none;
}

.profile-competition-empty {
  margin: 0;
  color: #4a5568;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.profile-actions:empty {
  display: none;
}

.profile-actions .btn-login {
  margin-top: 0;
}

.modal-content .btn-login.admin-ranking-danger,
.modal-content .btn-login.admin-danger {
  background: #b42318;
}

.modal-content .btn-login.admin-ranking-danger:hover,
.modal-content .btn-login.admin-ranking-danger:focus-visible,
.modal-content .btn-login.admin-danger:hover,
.modal-content .btn-login.admin-danger:focus-visible {
  background: #8f1c13;
}

.profile-match-card {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #d6dbe3;
  border-radius: 8px;
  background: #f8fafc;
}

.profile-match-card h3,
.profile-match-card p {
  margin: 0 0 4px;
}

.profile-match-date {
  font-size: 1rem;
  font-weight: 400;
}

.profile-match-actions,
.match-result-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-match-actions {
  margin-top: 4px;
}

.profile-match-actions .btn-login,
.match-result-suggestions .btn-login {
  flex: 1 1 150px;
  margin-top: 0;
}

.match-result-modal {
  z-index: 1100;
}

.match-result-modal .modal-content {
  width: min(100%, 680px);
  max-width: 680px;
}

.match-result-target {
  text-align: center;
}

.match-result-target > * {
  display: block;
}

#matchResultForm,
#matchResultCompletionFields,
#matchResultValueFields,
#matchResultLosingFields,
#matchResultStartFields,
#matchResultEndFields,
#matchResultReasonFields {
  display: grid;
  gap: 8px;
}

#matchResultForm {
  position: relative;
}

.match-result-field-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.match-result-field-row label,
.match-result-field-row input,
.match-result-field-row select {
  margin-top: 0;
}

.match-result-score-editor {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 4px 0 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.match-result-score-column {
  flex: 0 0 96px;
  padding: 6px;
  border: 1px solid #d6dbe3;
  border-radius: 8px;
  background: #f8fafc;
}

.match-result-score-column.tiebreak,
.match-result-score-column.match-tiebreak {
  border-color: #c28b27;
  background: #fff4d6;
}

.match-result-score-column h3 {
  margin: 0 0 5px;
  color: #344054;
  font-size: 0.75rem;
  line-height: 1;
  text-align: center;
}

.match-result-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
}

.match-result-score-row + .match-result-score-row {
  margin-top: 6px;
}

.modal-content .match-result-score-row input {
  width: 100%;
  height: 88px;
  margin: 0;
  padding: 4px;
  border-radius: 6px 0 0 6px;
  font-size: 1.65rem;
  font-weight: 700;
  text-align: center;
  appearance: textfield;
}

.match-result-score-row input::-webkit-inner-spin-button,
.match-result-score-row input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.match-result-score-controls {
  display: grid;
  grid-template-rows: 44px 44px;
}

.match-result-score-step {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #aab2bd;
  background: #e9eef5;
  color: #1d2939;
  font: 700 1.25rem/1 sans-serif;
  cursor: pointer;
}

.match-result-score-step:first-child {
  border-radius: 0 6px 0 0;
}

.match-result-score-step:last-child {
  border-radius: 0 0 6px 0;
}

.match-result-score-step:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid rgba(25, 103, 210, 0.35);
}

.match-result-suggestion[hidden] {
  display: none;
}

.match-result-status {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 8px;
  right: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #b42318;
  color: #fff;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.25);
  text-align: center;
}

.match-result-status.info {
  background: #344054;
}

.match-result-status.success {
  background: #187244;
}

.match-result-status[hidden] {
  display: none;
}

#matchResultRankPlanFields {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid #d6dbe3;
  border-radius: 6px;
}

#matchResultRankPlanFields p {
  margin: 0;
}

#matchResultRankPlan {
  display: grid;
  gap: 8px;
  max-height: 36vh;
  overflow-y: auto;
}

.match-result-rank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  align-items: center;
  gap: 10px;
}

.match-result-rank-row input {
  width: 100%;
}

#matchResultForm textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
}

#matchResultCompletionFields[hidden],
#matchResultValueFields[hidden],
#matchResultLosingFields[hidden],
#matchResultStartFields[hidden],
#matchResultEndFields[hidden],
#matchResultReasonFields[hidden],
#matchResultRankPlanFields[hidden] {
  display: none;
}

.ranking-admin-modal {
  z-index: 1100;
}

#adminRankingActionForm {
  display: grid;
  gap: 10px;
}

#adminRankingDateFields {
  display: grid;
  gap: 8px;
}

#adminRankingDateFields[hidden] {
  display: none;
}

#adminRankingReason {
  width: 100%;
  min-height: 100px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
  resize: vertical;
}

.message-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  color: #fff;
  background: #b42318;
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1;
  vertical-align: middle;
}

.message-count-badge[hidden] {
  display: none;
}

.message-list {
  display: grid;
  gap: 8px;
}

.message-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d7dce4;
  border-radius: 8px;
  color: var(--fg);
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.message-row-date,
.message-row-competition,
.message-row-round,
.message-row-actor,
.message-row-subject {
  color: #000;
  font-size: inherit;
  font-weight: 400;
}

.message-row-competition,
.message-row-round,
.message-row-actor,
.message-row-subject {
  min-width: 0;
  overflow-wrap: anywhere;
}

.message-row-subject {
  font-weight: 700;
}

.message-row-actor {
  font-size: 0.8rem;
}

.message-row.unread {
  border-color: #8db2ed;
  background: #eef5ff;
}

.message-row:hover,
.message-row:focus-visible {
  border-color: var(--accent);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px rgba(11, 87, 208, 0.18);
}

.message-list-empty {
  color: var(--muted);
  text-align: center;
}

.message-load-more {
  margin-top: 12px;
}

.message-detail-modal {
  z-index: 1100;
}

.message-detail-dialog {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(5rem, 1fr) auto auto;
  width: min(100%, 560px);
  max-width: 560px;
  max-height: 100%;
  overflow: hidden;
}

.message-detail-dialog > h2 {
  padding-right: 32px;
  overflow-wrap: anywhere;
}

.message-detail-date {
  margin: 0 0 6px;
  color: #000;
  font-size: 0.9rem;
}

.message-detail-competition {
  margin: 0 0 6px;
  color: #000;
  font-size: 0.9rem;
}

.message-detail-actor {
  margin: 0 0 14px;
  color: #000;
  font-size: 0.9rem;
  font-weight: 400;
}

.message-detail-actor[hidden] {
  display: none;
}

.message-detail-competition:has(+ .message-detail-actor[hidden]) {
  margin-bottom: 14px;
}

.message-detail-body {
  min-height: 0;
  padding: 14px;
  border: 1px solid #e1e5eb;
  border-radius: 8px;
  background: #fafbfc;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.message-detail-status {
  margin: 10px 0 0;
  text-align: center;
}

.message-detail-status:empty {
  display: none;
}

#acknowledgeMessageButton[hidden] {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.profile-open-challenge {
  display: grid;
  gap: 4px;
  margin: 1em 0;
}

.profile-open-challenge p {
  margin: 0;
  overflow-wrap: anywhere;
}

.profile-match-date-countdown {
  color: #187244;
  font-weight: 700;
}

.profile-match-date-countdown.warning {
  color: #b45309;
}

.profile-match-date-countdown.overdue {
  color: #b42318;
}

.match-date-label {
  display: block;
  margin-top: 12px;
  font-weight: 500;
}

.match-date-calendar {
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #d5dae2;
  border-radius: 8px;
  background: #fff;
}

.match-date-calendar-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  text-align: center;
}

.match-date-month-button {
  min-height: 36px;
  border: 1px solid #c9d0da;
  border-radius: 6px;
  color: var(--accent);
  background: #f7f9fc;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.match-date-weekdays,
.match-date-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.match-date-weekdays {
  margin-bottom: 3px;
  color: #5d6673;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.match-date-calendar-day,
.match-date-calendar-spacer {
  min-width: 0;
  aspect-ratio: 1;
}

.match-date-calendar-day {
  border: 1px solid transparent;
  border-radius: 6px;
  color: #222;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.match-date-calendar-day.in-window {
  font-weight: 800;
}

.match-date-calendar-day.challenge-start {
  border-color: #1d4ed8;
  color: #fff;
  background: #2563eb;
}

.match-date-calendar-day.challenge-end {
  border-color: #991b1b;
  color: #fff;
  background: #dc2626;
}

.match-date-calendar-day.selected {
  outline: 3px solid #111;
  outline-offset: 1px;
}

.match-date-calendar-day:disabled {
  border-color: transparent;
  color: #a3a8b0;
  background: #eef0f3;
  cursor: default;
  opacity: 1;
}

@media (max-width: 600px) {
  .profile-modal {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .profile-dialog > h2 {
    padding: 20px 48px 16px;
    font-size: 1.35rem;
  }

  .profile-tabs {
    padding: 0 8px;
  }

  .profile-tab {
    padding-right: 12px;
    padding-left: 12px;
  }

  .profile-body {
    padding: 18px 16px 20px;
  }

  .message-row {
    padding: 11px 12px;
  }

  .message-detail-modal {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .message-detail-dialog {
    padding: 20px 16px;
  }
}

.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-login:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.btn-login:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.modal-content .btn-login {
  width: 100%;
  margin-top: 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.modal-content .btn-login:hover {
  opacity: 0.85;
}

/* Button-Spinner (im Anmelde-Button) */
.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: loading-spin 0.6s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

/* Passwort vergessen Button */
.btn-forgot-password {
  display: block;
  margin: 10px auto 0 auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: underline;
  transition: color 0.2s;
}
.btn-forgot-password:hover {
  color: var(--accent);
}

.modal-content .close {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 1.3rem;
  color: #555;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 2px 6px;
  line-height: 1;
}

.modal-content .modal-cancel {
  margin-top: 8px;
  background: #e8eaed;
  color: var(--fg);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

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

/* -------------------------------------------------- */
/*  HEADER & NAVIGATION (Desktop + Mobile)             */
/* -------------------------------------------------- */

header {
  background: #0b57d0;
  color: #fff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* Header Logo (Jetzi immer in der Mitte) */
.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  order: 2;
}

header .logo {
  font-size: 1.4rem;
  font-weight: 600;
  color: white;
  white-space: nowrap;
}

/* Desktop: 3-spaltig Layout (Logo Mitte) */
.desktop-nav {
  display: flex;
  gap: 20px;
  order: 1;
  flex: 1;
}

.desktop-auth {
  display: flex;
  gap: 15px;
  align-items: center;
  order: 3;
  flex: 1;
  justify-content: flex-end;
}

/* Header-Logo (links) wird nicht mehr genutzt */
.header-logo {
  display: none;
}

/* Header Logo (links) */
.header-logo {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  order: 0;
  display: none; /* Standard: versteckt, nur Desktop zeigt es */
}

.header-logo:hover {
  opacity: 0.9;
}

/* Desktop: 3-spaltig Layout */
.desktop-nav {
  display: flex;
  gap: 20px;
  order: 1;
  flex: 1;
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  order: 2;
  flex: 1;
}

.desktop-auth {
  display: flex;
  gap: 15px;
  align-items: center;
  order: 3;
  flex: 1;
  justify-content: flex-end;
}

header .logo {
  font-size: 1.4rem;
  font-weight: 600;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s;
}

nav a:hover {
  opacity: 0.8;
}

nav a.active {
  border-bottom: 2px solid #fff;
  padding-bottom: 2px;
}

.hamburger {
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  display: none;
  padding: 0;
  margin: 0;
  margin-left: auto;
}

.hamburger.has-unread-messages {
  color: #ff4d4f;
}

.loggedIn {
  display: none;
}

.loggedOut {
  display: inline;
}

/* -------------------------------------------------- */
/*  MOBILE HEADER & HAMBURGER MENU                    */
/* -------------------------------------------------- */

/* Mobile Layout */
@media (max-width: 600px) {
  .match-card {
    padding: 6px 8px;
  }

  .match-date {
    font-size: 0.8rem;
  }

  .match-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 2px;
  }

  .match-meta-right {
    align-items: flex-start;
  }

  .badge-bewerb {
    font-size: 0.7rem;
    padding: 1px 6px;
  }

  /* Horizontal layout - lang gezogenes Rechteck */
  .match-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: nowrap;
    margin-top: 2px;
  }

  .team {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 0.9rem;
  }

  .vs {
    font-size: 1rem;
    flex-shrink: 0;
  }

  .action-area {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
  }

  .sets {
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    align-items: center;
  }

  .set {
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
    min-width: 35px;
    text-align: center;
  }
}

/* Mobile Navigation Content */
#mobileNavModal {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
}

.mobile-nav-content {
  width: min(100%, 320px);
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-nav-content .close {
  position: static;
  font-size: 1.3rem;
  color: #555;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
  margin-bottom: 8px;
  background: none;
  border: none;
  padding: 0;
}

/* Mobile Notification Bell */
.mobile-bell {
  color: white;
  font-size: 1.2rem;
  text-align: center;
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

/* Mobile Auth Section */
.mobile-auth-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;
}

.mobile-auth-section a {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  text-align: center;
}

.mobile-auth-section a:last-child {
  border-bottom: none;
}

.mobile-auth-section a:hover {
  background: #f5f5f5;
}

/* Mobile Nav Links */
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-nav-links a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  text-align: center;
}

.mobile-nav-links a[hidden] {
  display: none;
}

.mobile-nav-links a:last-child {
  border-bottom: none;
}

.mobile-nav-links a:hover {
  background: #f5f5f5;
}

/* -------------------------------------------------- */
/*  BEWERBE GRID                                      */
/* -------------------------------------------------- */

.bewerbe-page-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.bewerbe-page-heading > h2 {
  min-width: 0;
  margin-right: 0;
}

.bewerbe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 12px;
}

.bewerb-card {
  position: relative;
  background: #f7f7f7;
  border: 2px solid var(--table-border);
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bewerb-card h3 {
  min-width: 0;
  margin: 0;
  font-size: 1.1rem;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.bewerb-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 12px;
}

.competition-history-button {
  flex: 0 0 auto;
  display: inline-grid;
  width: 30px;
  height: 30px;
  padding: 4px;
  border: 0;
  border-radius: 5px;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 2;
  place-items: center;
}

.competition-history-button::before {
  position: absolute;
  inset: -7px;
  content: "";
}

.competition-history-button svg {
  width: 21px;
  height: 21px;
}

.competition-history-more {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}

.bewerb-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.bewerb-card-link:focus-visible {
  outline: 3px solid rgba(11, 87, 208, 0.45);
  outline-offset: 2px;
}

.competition-history-button[hidden],
.competition-history-more[hidden] {
  display: none;
}

.competition-history-button:hover,
.competition-history-button:focus-visible {
  color: #fff;
  background: var(--accent);
  outline: 2px solid transparent;
}

.competition-history-more:hover,
.competition-history-more:focus-visible {
  color: #fff;
  background: var(--accent);
  outline: 2px solid transparent;
}

.competition-history-more:disabled {
  cursor: wait;
  opacity: 0.65;
}

.bewerb-dates {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
  color: var(--muted);
}

.bewerb-dates.with-entrylist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}

.bewerb-card.clickable {
  cursor: pointer;
  border-color: var(--accent);
}

.bewerb-card.clickable:hover,
.bewerb-card.clickable:focus-visible {
  background: #eaf1fb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(11, 87, 208, 0.15);
}

.competition-history-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: grid;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(0, 0, 0, 0.4);
}

.competition-history-modal[hidden] {
  display: none;
}

.competition-history-dialog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: calc(100dvh - 32px);
  width: min(100%, 620px);
  max-height: calc(100dvh - 32px);
  padding: 24px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.competition-history-heading {
  position: relative;
  padding: 0 44px;
  text-align: center;
}

.competition-history-heading-copy,
.competition-history-heading h2,
.competition-history-heading p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.competition-history-heading h2 {
  color: var(--accent);
}

.competition-history-heading p {
  margin-top: 4px;
  color: var(--fg);
  font-size: 1.05rem;
  font-weight: 700;
}

.competition-history-close {
  position: absolute;
  top: -8px;
  right: -8px;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 1.8rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.competition-history-close:hover,
.competition-history-close:focus-visible {
  color: var(--fg);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.competition-history-status {
  min-height: 1.4em;
  margin: 14px 0 8px;
  color: var(--muted);
}

.competition-history-body {
  min-height: 0;
  height: 100%;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.competition-history-list {
  min-height: 0;
  margin: 0;
  padding: 0 4px;
  list-style: none;
}

.competition-history-entry {
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--table-border);
  color: #000;
  font-size: 0.9rem;
  font-weight: 400;
}

.competition-history-entry time {
  display: block;
  color: #000;
  font-size: inherit;
  font-weight: 400;
  text-align: left;
}

.competition-history-entry-meta {
  color: #000;
  font-size: inherit;
  font-weight: 400;
}

.competition-history-entry p {
  margin: 4px 0 0;
  color: #000;
  font-size: inherit;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.competition-history-entry p.competition-history-entry-title {
  font-weight: 700;
}

.competition-history-entry-competition {
  font-weight: 400;
}

.competition-history-entry-round {
  font-weight: 400;
}

.competition-history-entry-result {
  font-weight: 400;
}

.competition-history-entry-detail {
  white-space: pre-wrap;
}

.history-entry-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  min-height: 32px;
}

.history-action-group,
.history-reaction-summary {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.history-reaction-summary {
  min-width: 0;
  gap: 1px;
}

.history-action-button,
.history-reaction-button,
.history-reaction-add {
  display: inline-grid;
  min-width: 30px;
  min-height: 30px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  place-items: center;
  cursor: pointer;
}

.history-action-button:hover,
.history-action-button:focus-visible,
.history-reaction-button:hover,
.history-reaction-button:focus-visible,
.history-reaction-add:hover,
.history-reaction-add:focus-visible {
  color: var(--accent);
  background: #eaf1fb;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.history-action-button svg,
.history-reaction-add svg {
  width: 21px;
  height: 21px;
}

.history-reaction-button {
  min-width: 27px;
  padding-inline: 2px;
  color: #000;
  font-size: 1.15rem;
  line-height: 1;
}

.history-reaction-button.is-mine {
  background: #dce9fb;
  box-shadow: inset 0 0 0 1px var(--accent);
}

.history-action-count {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.history-reaction-add {
  margin-left: 1px;
  color: var(--accent);
}

.history-interaction-modal {
  z-index: 1060;
  background: rgba(0, 0, 0, 0.52);
}

.history-editor-modal {
  z-index: 1070;
}

.history-comments-dialog {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(100%, 560px);
}

.history-comments-body,
.history-reactions-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.history-comments-list,
.history-reactions-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-comment {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f2f5f8;
}

.history-comment.is-mine {
  margin-left: 28px;
  background: #e4f0ff;
}

.history-comment.is-under-review {
  border: 1px dashed #b36b00;
  background: #fff7e6;
}

.history-comment-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--muted);
  font-size: 0.78rem;
}

.history-comment-author {
  color: var(--fg);
  font-weight: 700;
}

.history-comment-body {
  margin: 6px 0 0;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.history-comment-placeholder {
  font-style: italic;
}

.history-comment-actions,
.history-editor-actions,
.history-comment-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-comment-reactions {
  display: flex;
  align-items: center;
  margin-top: 7px;
}

.history-comment-actions {
  flex-wrap: wrap;
  margin-top: 8px;
}

.history-comment-actions button {
  padding: 3px 6px;
  border: 0;
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}

.history-primary-action,
.history-secondary-action {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.history-primary-action {
  color: #fff;
  background: var(--accent);
}

.history-secondary-action {
  color: var(--accent);
  background: #fff;
}

.history-comments-dialog > .history-primary-action {
  margin-top: 12px;
}

.history-editor-dialog,
.history-reactions-dialog {
  width: min(100%, 520px);
  max-height: calc(100dvh - 32px);
  padding: 24px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
  overflow-y: auto;
}

.history-reactions-dialog {
  width: min(100%, 420px);
}

.history-comment-label {
  display: block;
  margin: 18px 0 6px;
  font-weight: 700;
}

#history-comment-text {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border: 1px solid var(--table-border);
  border-radius: 7px;
  resize: vertical;
  font: inherit;
}

.history-comment-tools {
  justify-content: space-between;
  margin-top: 8px;
}

.history-comment-tools .history-secondary-action {
  min-height: 36px;
  padding: 5px 9px;
  font-size: 0.85rem;
}

#history-comment-counter {
  color: var(--muted);
  font-size: 0.82rem;
}

#history-comment-counter.is-over-limit {
  color: #a00;
  font-weight: 700;
}

.history-comment-emoji-picker {
  height: min(340px, 45dvh);
  margin-top: 10px;
}

.history-comment-emoji-picker emoji-picker {
  width: 100%;
  height: 100%;
  --border-radius: 7px;
  --indicator-color: var(--accent);
}

.history-editor-actions {
  justify-content: flex-end;
}

.history-reaction-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.history-reaction-choice {
  min-height: 58px;
  padding: 6px;
  border: 1px solid var(--table-border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 1.6rem;
  cursor: pointer;
}

.history-reaction-choice.is-mine {
  border-color: var(--accent);
  background: #eaf1fb;
}

.history-reaction-person {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--table-border);
}

.history-reaction-person-emoji {
  width: 2em;
  font-size: 1.2rem;
  text-align: center;
}

.history-reaction-person-name {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}

.competition-history-more {
  display: block;
  margin: 16px auto 0;
}

@media (max-width: 600px) {
  .bewerb-heading {
    gap: 5px;
  }

  .competition-history-dialog {
    padding: 20px 16px;
  }

  .history-editor-dialog,
  .history-reactions-dialog {
    padding: 20px 16px;
  }

  .history-entry-actions {
    gap: 7px;
  }
}

/* -------------------------------------------------- */
/*  BEWERBE SECTIONS                                  */
/* -------------------------------------------------- */

.bewerb-section {
  margin-bottom: 32px;
}

.bewerb-section-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 8px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

/* -------------------------------------------------- */
/*  HAUPTLAYOUT (Content + Sidebar)                     */
/* -------------------------------------------------- */

main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin: 4px auto;
  padding: 0 4px;
}

main:has(#rankingSection.full-width-section),
main:has(#bracketSection.full-width-section),
main:has(#roundRobinContainer) {
  grid-template-columns: 1fr;
  margin: 8px auto;
  padding: 0 8px;
}

section,
.sidebar {
  background: #fff;
  border: 1px solid var(--table-border);
  border-radius: 10px;
  padding: 8px;
}

section {
  background: #fafafa;
}

.sidebar {
  background: #f9fafc;
}

/* -------------------------------------------------- */
/*  Allgemeine Gestaltung und Tabellen                 */
/* -------------------------------------------------- */

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.header a.logo {
  text-decoration: none;
  color: var(--fg);
  font-weight: 600;
}

.nav a {
  text-decoration: none;
  color: var(--muted);
  margin-right: 12px;
}

.nav a.active {
  color: var(--accent);
  font-weight: 600;
}

.container {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 16px;
}

h1 {
  font-size: 1.4rem;
  margin: 0 0 16px;
}

.table,
.entry-list-table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td,
.entry-list-table th,
.entry-list-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--table-border);
  text-align: left;
}

.table th,
.entry-list-table th {
  background: #fafafa;
  font-weight: 600;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.85rem;
  background: #f3f6fc;
  color: #2d5bd1;
}

.note {
  color: var(--muted);
  font-size: 0.95rem;
}

.footer,
footer {
  padding: 16px;
  color: var(--muted);
  border-top: 1px solid #eee;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-brand {
  display: inline;
}

.footer-separator {
  display: inline;
}

@media (max-width: 500px) {
  .footer,
  footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    text-align: center;
  }

  .footer-brand {
    grid-row: 1;
  }

  .footer-clock {
    grid-row: 2;
  }

  #footer-version {
    grid-row: 3;
  }

  .footer-separator {
    display: none;
  }
}

/* -------------------------------------------------- */
/*  TOAST NOTIFICATIONS (Replaces Alerts)             */
/* -------------------------------------------------- */

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: #333;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 0.95rem;
  animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
  max-width: 300px;
}

.toast.error {
  background: #e74c3c;
}

.toast.success {
  background: #2ecc71;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; display: none; }
}

select,
input[type="date"] {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font: inherit;
  color: inherit;
}

.players-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.players-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.players-table th,
.players-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid var(--table-border, #e0e0e0);
  white-space: nowrap;
}

.players-table th {
  background: #f7f7f7;
  font-weight: 600;
  color: var(--fg);
}

.players-table tr:hover {
  background: #fafafa;
}

.players-table tbody tr[role="button"] {
  cursor: pointer;
}

.players-table tbody tr[role="button"]:focus-visible {
  outline: 3px solid var(--focus-color, #1f6feb);
  outline-offset: -3px;
}

.players-table tbody tr.current-player td {
  font-weight: 800;
}

.players-table tr.entry-paid td {
  color: #198754;
  font-weight: 600;
}

/* -------------------------------------------------- */
/*  PYRAMIDEN-DESIGN (aus deiner bestehenden Datei)    */
/* -------------------------------------------------- */

.ranking-body {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

#rankingSection {
  min-width: 0;
  max-width: 100%;
}

.pyramid {
  flex: 1 1 320px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.pyramid-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 8px;
}

.row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.ranking-header {
  display: block;
  margin-bottom: 8px;
}

.ranking-legend {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--fg);
  font-size: 0.95rem;
  min-width: 220px;
  max-width: 260px;
}

.ranking-legend .legend-label {
  font-weight: 700;
}

.ranking-legend .legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ranking-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ranking-legend .legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.ranking-legend .legend-swatch.challengeable {
  background: #e6f9e8;
  border: 1px solid #198754;
}

.ranking-legend .legend-swatch.challenged {
  background: #fff6cc;
}

.ranking-legend .legend-swatch.schonzeit {
  background: #f4b8c8;
}

.ranking-legend .legend-swatch.sperrzeit {
  background: #dcc7e8;
}

.ranking-legend .legend-swatch.protected {
  background: #dcc7e8;
}

.ranking-legend .legend-swatch.selected {
  background: #eaf1fb;
  border: 1px solid #0b57d0;
}

.ranking-legend .legend-swatch.challenge-with-me {
  background: #fff;
  border: 1px solid #0b57d0;
}

.ranking-legend .legend-subheading {
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 8px;
}

.ranking-withdrawn-button {
  justify-self: start;
  margin-top: 8px;
  padding: 7px 12px;
  border: 1px solid #8b2f45;
  border-radius: 999px;
  background: transparent;
  color: #8b2f45;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ranking-withdrawn-button:hover,
.ranking-withdrawn-button:focus-visible {
  background: #fbe9ee;
}

.withdrawn-players-list {
  display: grid;
  gap: 12px;
}

.withdrawn-player {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 12px;
  border-left: 4px solid #8b2f45;
  border-radius: 4px;
  background: #f8f8f8;
}

.withdrawn-player span,
.withdrawn-player p {
  color: #555;
  font-size: 0.9rem;
}

.withdrawn-player p {
  margin: 0;
  white-space: pre-wrap;
}

.box {
  width: 120px;
  height: 70px;
  border: 3px solid #000;
  border-radius: 15px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  user-select: none;
  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
}

.box-rank-bg {
  position: absolute;
  font-size: 4rem;
  font-weight: 900;
  color: #b0b0b0;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.box-name {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: #000;
  text-align: center;
  line-height: 1.2;
}

.box.profile-openable {
  cursor: pointer;
}

.box.profile-openable:hover {
  background: #eaf1fb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.dragging {
  opacity: 0.6;
  background: #dce4f5;
  cursor: grabbing;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.box.selected {
  border-color: #0b57d0;
  background: #eaf1fb;
}

.box.challenge-with-me {
  border-color: #0b57d0 !important;
}

.box.challengeable {
  background: #e6f9e8;
  border-color: #198754;
}

.box.challenged {
  background: #fff6cc;
  cursor: not-allowed;
}

.box.sperrzeit {
  background: #dcc7e8 !important;
}

.box.sperrzeit:hover {
  background: #ceb5dd !important;
  box-shadow: 0 2px 8px rgba(142, 68, 173, 0.25);
}

/* -------------------------------------------------- */
/*  SCHONZEIT / SPERRZEIT                              */
/* -------------------------------------------------- */

.box.schonzeit {
  background: #f4b8c8 !important;
  cursor: default !important;
}

.box.schonzeit:hover {
  background: #eba0b4 !important;
  box-shadow: 0 2px 8px rgba(214, 51, 108, 0.25);
}

.box.protected {
  background: #dcc7e8 !important;
  cursor: not-allowed !important;
}

.box.protected:hover {
  background: #ceb5dd !important;
  box-shadow: 0 2px 8px rgba(142, 68, 173, 0.25);
}

/* Countdown-Anzeige im Kästchen (wie clock.js – update jede Minute) */
.box-timer {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.5rem;
  font-weight: 700;
  color: #6c3483;
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}

@media (max-width: 768px) {
  main {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    order: 2;
  }

  .desktop-nav,
  .desktop-auth {
    display: none !important;
  }
}


/* -------------------------------------------------- */
/*  RESPONSIVE HEADER (Hamburger Menu)                */
/* -------------------------------------------------- */

@media (max-width: 600px) {
  header {
    padding: 10px 12px;
    justify-content: space-between;
  }

  .header-logo {
    display: none;
  }

  .header-center .logo {
    display: block;
    font-size: 1.3rem;
    color: white;
    font-weight: 700;
  }

  .hamburger {
    display: block;
    font-size: 1.6rem;
  }

  .desktop-nav,
  .desktop-auth {
    display: none !important;
  }
}

  .team {
    flex: 1;
    min-width: auto;
    align-items: flex-start;
  }

  .player {
    font-size: 0.95rem;
  }

  .vs {
    font-size: 0.9rem;
    flex-shrink: 0;
    margin: 0 4px;
  }

  .sets {
    min-width: 50px;
    gap: 2px;
  }

  .set {
    font-size: 0.95rem;
  }

  .match-date {
    position: static;
    margin-bottom: 6px;
    font-size: 0.85rem;
  }


/* -------------------------------------------------- */
/*  RESPONSIVES LAYOUT                                */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/*  RESPONSIVE TABLE                                   */
/* -------------------------------------------------- */
/*  NOTIFICATION BELL                                 */
/* -------------------------------------------------- */

.notification-bell {
  color: white;
  font-size: 1.2rem;
}

.notification-bell:hover {
  opacity: 0.8;
}

#notificationBadge {
  display: none;
}

/* -------------------------------------------------- */
/*  CHALLENGE LIST IN NOTIFICATION MODAL              */
/* -------------------------------------------------- */

#challengeList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.challenge-item {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.challenge-item p {
  margin: 0;
  font-size: 0.95rem;
}

.challenger-name {
  font-weight: 800;
  color: #d9534f;
}

.challenge-item input[type="date"],
.challenge-item input[type="text"] {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}

.challenge-item .set-date-btn {
  margin-top: 4px;
  padding: 8px;
  background: #0b57d0;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.challenge-item .set-date-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.challenge-item .set-date-btn:hover:not(:disabled) {
  opacity: 0.85;
}

/* -------------------------------------------------- */
/*  DROPDOWN NAVIGATION                               */
/* -------------------------------------------------- */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown > .dropbtn {
  cursor: pointer;
  pointer-events: none;
}

.dropdown > .dropbtn-active {
  cursor: pointer;
  pointer-events: auto;
  border-bottom: 2px solid #fff;
  padding-bottom: 2px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background: white;
  min-width: 150px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  z-index: 100;
  top: 100%;
  left: 0;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  color: var(--fg);
  padding: 10px 14px;
  text-decoration: none;
  display: block;
  font-size: 0.95rem;
  border-bottom: 1px solid #eee;
}

.dropdown-content a:last-child {
  border-bottom: none;
}

.dropdown-content a:hover {
  background: #f5f5f5;
}

.dropdown-content a.active {
  color: var(--accent);
  font-weight: 600;
}

/* -------------------------------------------------- */
/*  PREMATCH STATUS BADGES                            */
/* -------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-offen {
  background: #fff3cd;
  color: #856404;
}

.badge-bestaetigt {
  background: #d4edda;
  color: #155724;
}

.badge-gespielt {
  background: #cce5ff;
  color: #004085;
}

.badge-abgelaufen {
  background: #f8d7da;
  color: #721c24;
}

.badge-ergebnis {
  background: #e2e3e5;
  color: #383d41;
}

.badge-wo, .badge-ret {
  background: #fff3cd;
  color: #856404;
  font-size: 0.7rem;
  padding: 1px 6px;
  vertical-align: middle;
  margin-left: 3px;
}

.badge-gesetzt {
  background: #cce5ff;
  color: #004085;
  font-size: 0.7rem;
  padding: 1px 6px;
  vertical-align: middle;
  margin-left: 3px;
}

/* -------------------------------------------------- */
/*  MATCH CARD STATUS                                 */
/* -------------------------------------------------- */

.match-card.status-offen {
  border-left: 4px solid #ffc107;
}

.match-card.status-bestaetigt {
  border-left: 4px solid #28a745;
}

.match-header {
  margin-bottom: 2px;
}

.match-forderung {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 8px;
}

.match-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-bottom: 4px;
}

.match-meta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.match-meta-row .match-date {
  position: static;
  margin-bottom: 0;
}

.badge-bewerb {
  background: #d4edda;
  color: #155724;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* -------------------------------------------------- */
/*  ACTION BUTTONS                                    */
/* -------------------------------------------------- */

.action-area {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

#preMatches-container .action-area,
#preMatches-container .loggedout,
#preMatches-container .waiting-text {
  display: none !important;
}

#withdrawBtn {
  display: none !important;
}

.btn-action {
  padding: 8px 14px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.btn-action:hover {
  opacity: 0.85;
}

.btn-action:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.waiting-text {
  color: var(--muted);
  font-style: italic;
  font-size: 0.9rem;
}

/* -------------------------------------------------- */
/*  RESULT MODAL                                      */
/* -------------------------------------------------- */

.satz-input-group {
  margin-bottom: 12px;
}

.satz-input-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

.satz-input-group input,
.satz-input-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

.loading-text {
  color: var(--muted);
  font-style: italic;
}

.debug-info {
  font-size: 0.8rem;
  color: #999;
  margin-top: 10px;
}

/* -------------------------------------------------- */
/*  MATCH CARD SETS AREA                              */
/* -------------------------------------------------- */

.sets {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 60px;
}

.set {
  font-weight: 600;
  color: var(--fg);
  font-size: 1rem;
}

/* === DESKTOP (>900px) === */
@media (min-width: 901px) {
  .header-logo {
    display: none;
  }

  .header-center .logo {
    display: block;
    font-size: 1.4rem;
  }

  .hamburger {
    display: none;
  }

  .desktop-nav,
  .desktop-auth {
    display: flex !important;
  }
}

/* === TABLET (601px – 900px) === */
@media (max-width: 900px) {
  header {
    padding: 12px 16px;
    justify-content: space-between;
  }

  .desktop-nav,
  .desktop-auth {
    display: none !important;
  }

  .hamburger {
    display: block;
    font-size: 1.8rem;
  }

  .header-center .logo {
    display: block;
    font-size: 1.4rem;
    color: white;
    font-weight: 700;
  }
}

/* === MOBILE (<=600px) === */
@media (max-width: 600px) {
  header {
    padding: 10px 12px;
    justify-content: space-between;
  }

  .header-logo {
    display: none;
  }

  .header-center .logo {
    display: block;
    font-size: 1.3rem;
    color: white;
    font-weight: 700;
  }

  .hamburger {
    display: block;
    font-size: 1.6rem;
  }

  .desktop-nav,
  .desktop-auth {
    display: none !important;
  }
}

/* -------------------------------------------------- */
/*  RESPONSIVE LAYOUT                                  */
/* -------------------------------------------------- */

@media (max-width: 768px) {
  main {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    order: 2;
  }
}

/* -------------------------------------------------- */
/*  RESPONSIVE MATCH CARDS                             */
/* -------------------------------------------------- */

@media (max-width: 768px) {
  .pyramid {
    flex-basis: 100%;
    padding-bottom: 15px;
  }

  .pyramid-content {
    gap: 15px;
    padding: 4px;
  }

  .row {
    gap: 10px;
    flex-wrap: nowrap;
    min-width: max-content;
  }

  .box {
    width: 100px;
    height: 50px;
    font-size: 0.9rem;
    border-width: 2px;
    flex-shrink: 0;
  }
}

  .match-date {
    font-size: 0.85rem;
    margin-bottom: 6px;
  }

  /* Horizontal layout - lang gezogenes Rechteck */
  .match-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .team {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 0.9rem;
  }

  .vs {
    font-size: 1rem;
    flex-shrink: 0;
  }

  .action-area {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
  }

  .sets {
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    align-items: center;
  }

  .set {
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
    min-width: 35px;
    text-align: center;
  }


/* -------------------------------------------------- */
/*  RESPONSIVE TABLE                                   */
/* -------------------------------------------------- */

@media (max-width: 768px) {
  .box-rank-bg {
    font-size: 2.5rem;
  }

  .box-name {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .pyramid {
    padding-bottom: 15px;
  }

  .pyramid-content {
    gap: 10px;
  }

  .row {
    gap: 8px;
    flex-wrap: nowrap;
    min-width: max-content;
  }

  .box {
    width: 85px;
    height: 45px;
    font-size: 0.8rem;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .box-rank-bg {
    font-size: 2rem;
  }

  .box-name {
    font-size: 0.6rem;
  }
  }

  .table th, .table td {
    padding: 8px 6px;
  }


.bewerb-date-info {
  margin: 8px 0;
  padding: 8px 12px;
  background: #fff3cd;
  border-radius: 6px;
  color: #856404;
  font-size: 0.9rem;
}

/* -------------------------------------------------- */
/*  BRACKET / TURNIERRASTER                           */
/* -------------------------------------------------- */

body.bracket-page {
  overflow-x: hidden;
}

#bracketSection {
  min-width: 0;
  max-width: 100%;
}

#bracketContainer {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.bracket {
  width: max-content;
  min-width: 100%;
  padding: 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bracket-stage {
  position: relative;
  width: fit-content;
}

.bracket-column-bands {
  position: absolute;
  inset: -8px 0 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(200px, 1fr));
  pointer-events: none;
}

.bracket-column-band {
  background: #edf3fb;
}

.bracket-column-band:nth-child(even) {
  background: #f5f5f5;
}

.bracket-header-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(200px, 1fr));
  gap: 56px;
  justify-items: center;
  margin: 0 auto 24px;
  padding: 0;
  width: fit-content;
}

.bracket-round-header {
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bracket-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(200px, 1fr));
  grid-template-rows: repeat(var(--rows, 16), var(--row-height, 28px));
  gap: 0 56px;
  justify-items: center;
  align-items: start;
  width: fit-content;
  margin: 0 auto;
  position: relative;
}

.bracket-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.bracket-lines path {
  stroke: #555;
  stroke-width: 2;
  fill: none;
}

.bracket-match {
  width: 200px;
  position: relative;
  z-index: 2;
}

.bracket-match-box {
  display: flex;
  flex-direction: column;
  border: 2px solid #666;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
}

.bracket-match-date {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  width: 100%;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.bracket-player {
  padding: 8px 14px;
  font-size: 0.85rem;
  background: #fff;
  border-bottom: 2px solid #666;
  white-space: nowrap;
  cursor: default;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.bracket-player .pname {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

button.bracket-player-name {
  min-height: 24px;
  padding: 2px 3px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
  cursor: pointer;
}

button.bracket-player-name:hover {
  text-decoration: underline;
}

button.bracket-player-name:focus-visible {
  outline: 2px solid #0b57d0;
  outline-offset: 1px;
}

.bracket-player-separator {
  white-space: pre;
}

.bracket-player .player-result {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: baseline;
  column-gap: 0.3ch;
  font-weight: 600;
  color: #555;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bracket-player .set-result {
  text-align: right;
}

.bracket-player .set-result.two-digit {
  min-width: 2ch;
}

.bracket-player .set-result-separator {
  color: #888;
  font-weight: 400;
}
.bracket-player.winner {
  background: #e8f5e9;
  font-weight: 600;
}
.bracket-player.winner .player-result {
  color: #2e7d32;
}

.bracket-player.current-user,
.bracket-player.current-user .player-result {
  color: #0b57d0;
}

.bracket-player:last-child {
  border-bottom: none;
}

.bracket-player.bye {
  color: #999;
  font-style: italic;
}

@keyframes blink-green {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(0, 180, 0, 0.35); }
}

.bracket-player.blink-green {
  animation: blink-green 1.2s ease-in-out infinite;
}

.bracket-match.has-result .bracket-player {
  border-bottom: none;
}

.bracket-player-count {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.bracket-match[data-has-connector="true"]::before {
  display: none;
}

.bracket-match-connector {
  display: none;
}

@media (max-width: 768px) {
  .bracket-match {
    width: 150px;
  }
  .bracket-player {
    font-size: 0.75rem;
    padding: 6px 10px;
  }
}

/* -------------------------------------------------- */
/*  BRACKET TABLE (Grid-Ansatz)                        */
/* -------------------------------------------------- */
.bracket-table {
  border-collapse: collapse;
  margin: 0 auto;
  width: auto;
}
.bracket-table th {
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #ddd;
}
.bracket-table td {
  padding: 12px 16px;
  vertical-align: middle;
  min-width: 180px;
}
.bracket-table .btop,
.bracket-table .bbot {
  padding: 6px 12px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 0.85rem;
  white-space: nowrap;
}
.bracket-table .btop {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.bracket-table .bbot {
  border-top: none;
  border-radius: 0 0 6px 6px;
}
.bracket-table .btop.bye,
.bracket-table .bbot.bye {
  color: #999;
  font-style: italic;
}

@media (max-width: 768px) {
  .bracket-table td {
    min-width: 100px;
    padding: 8px 6px;
  }
  .bracket-table .btop,
  .bracket-table .bbot {
    font-size: 0.75rem;
    padding: 4px 8px;
  }
}

/* -------------------------------------------------- */
/*  RESPONSIVE PYRAMID                                 */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/*  NAVIGATOR                                          */
/* -------------------------------------------------- */

.navigator-body {
  min-height: 100vh;
  overflow-y: auto;
  color: #e7edf7;
  background:
    radial-gradient(circle at 12% 0%, rgba(43, 108, 176, 0.24), transparent 30rem),
    #0d1524;
}

.navigator-access {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.navigator-access[hidden],
.navigator-app[hidden],
.admin-monitor-panel[hidden],
.monitor-token-panel[hidden] {
  display: none !important;
}

.navigator-access-card {
  width: min(100%, 520px);
  padding: clamp(28px, 6vw, 56px);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 20px;
  background: rgba(15, 26, 44, 0.94);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

.navigator-access-card h1,
.navigator-title-block h1,
.admin-monitor-heading h2 {
  margin: 0;
  color: #f8fafc;
}

.navigator-access-card > p:not(.navigator-eyebrow) {
  color: #b7c4d8;
  line-height: 1.6;
}

.navigator-eyebrow {
  margin: 0 0 5px;
  color: #79c6ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.navigator-primary-link,
.navigator-primary-btn,
.navigator-secondary-btn,
.navigator-danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.navigator-primary-link,
.navigator-primary-btn {
  color: #07111e;
  background: #79c6ff;
}

.navigator-secondary-btn {
  color: #dbeafe;
  border-color: #41536d;
  background: #1a2940;
}

.navigator-danger-btn {
  color: #fecaca;
  border-color: #7f1d1d;
  background: #3c1820;
}

.navigator-primary-btn:disabled,
.navigator-secondary-btn:disabled,
.navigator-danger-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.navigator-app {
  width: min(100%, 1600px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 14px 80px;
}

.navigator-toolbar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(230px, 1fr) minmax(280px, 1.35fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  color: #e7edf7;
  background: rgba(15, 26, 44, 0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
}

.navigator-title-block h1 {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.navigator-session {
  display: block;
  margin-top: 4px;
  color: #9fb0c8;
  font-size: 0.78rem;
}

.navigator-monitor-picker {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
}

.navigator-monitor-picker label {
  color: #9fb0c8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.navigator-monitor-picker select {
  min-width: 0;
  width: 100%;
  color: #f8fafc;
  border-color: #40516b;
  background: #152238;
}

.navigator-monitor-picker .navigator-state {
  grid-column: 2;
}

.navigator-live-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.navigator-state,
.navigator-command-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #33445d;
  border-radius: 999px;
  color: #b8c5d8;
  background: #142137;
  font-size: 0.75rem;
  line-height: 1.25;
}

.navigator-state[data-state="connected"],
.navigator-state[data-state="online"],
.navigator-command-status[data-state="loaded"],
.navigator-command-status[data-state="applied"] {
  color: #b7f7d0;
  border-color: #236344;
  background: #123526;
}

.navigator-state[data-state="stale"],
.navigator-state[data-state="backoff"],
.navigator-state[data-state="connecting"],
.navigator-command-status[data-state="offline"],
.navigator-command-status[data-state="queued"],
.navigator-command-status[data-state="sent"],
.navigator-command-status[data-state="received"],
.navigator-command-status[data-state="loading"],
.navigator-command-status[data-state="sending"],
.navigator-command-status[data-state="pending"] {
  color: #fde68a;
  border-color: #7a5b17;
  background: #3b2c0f;
}

.navigator-state[data-state="offline"],
.navigator-command-status[data-state="failed"] {
  color: #fecaca;
  border-color: #7f2a34;
  background: #3d1820;
}

.navigator-notice {
  margin: 10px 0 0;
  padding: 10px 14px;
  border: 1px solid #40516b;
  border-radius: 10px;
  color: #dbeafe;
  background: #17263d;
}

.navigator-notice[data-type="error"],
.navigator-notice[data-type="warning"] {
  color: #fecaca;
  border-color: #7f2a34;
  background: #3d1820;
}

.navigator-notice[data-type="success"] {
  color: #b7f7d0;
  border-color: #236344;
  background: #123526;
}

.navigator-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-height: 220px;
  padding: 14px 0;
}

.navigator-empty {
  grid-column: 1 / -1;
  align-self: center;
  margin: 0;
  padding: 36px;
  color: #9fb0c8;
  text-align: center;
}

.navigator-error {
  color: #fecaca;
}

.nav-btn {
  min-height: clamp(72px, 10vh, 118px);
  padding: 12px;
  border: 1px solid #2e6ea7;
  border-radius: 12px;
  color: #eef8ff;
  background: linear-gradient(145deg, #15548a, #123e69);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 7px 16px rgba(0, 0, 0, 0.2);
  font: inherit;
  font-size: clamp(0.8rem, 1.4vw, 1.08rem);
  font-weight: 750;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, opacity 0.15s;
}

.nav-btn:hover {
  border-color: #79c6ff;
  background: linear-gradient(145deg, #1b68a9, #164d80);
  transform: translateY(-1px);
}

.nav-btn.active {
  border-color: #4ade80;
  background: linear-gradient(145deg, #197443, #135833);
}

.nav-btn.active:hover {
  background: linear-gradient(145deg, #208c51, #176b3c);
}

.nav-btn.blink-yellow {
  animation: nav-blink 0.6s ease-in-out infinite;
  color: #fff7cc;
  border-color: #fbbf24;
  background: linear-gradient(145deg, #8a6412, #684a0d);
}

.nav-btn.command-failed {
  color: #fee2e2;
  border-color: #f87171;
  background: linear-gradient(145deg, #842f3b, #63232d);
}

.nav-btn.command-sending {
  opacity: 0.68;
}

.nav-btn:disabled,
.nav-btn-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}

@keyframes nav-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.58; }
}

.admin-monitor-panel {
  margin: 0 0 14px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  color: #e7edf7;
  background: #111e32;
}

.admin-monitor-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
}

.admin-monitor-heading h2 {
  font-size: 1.15rem;
}

.monitor-provision-form {
  display: grid;
  grid-template-columns: minmax(160px, 280px) auto;
  gap: 6px 8px;
  align-items: end;
}

.monitor-provision-form label {
  grid-column: 1 / -1;
  color: #9fb0c8;
  font-size: 0.78rem;
  font-weight: 700;
}

.monitor-provision-form input {
  min-height: 38px;
  padding: 8px 10px;
  color: #f8fafc;
  border: 1px solid #40516b;
  border-radius: 8px;
  background: #152238;
  font: inherit;
}

.admin-monitor-status {
  min-height: 1.25em;
  margin: 12px 0;
  color: #9fb0c8;
  font-size: 0.86rem;
}

.admin-monitor-status[data-type="error"],
.admin-monitor-status[data-type="warning"] {
  color: #fca5a5;
}

.admin-monitor-status[data-type="success"] {
  color: #86efac;
}

.monitor-token-panel {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #8a671a;
  border-radius: 10px;
  color: #ffefb3;
  background: #392b10;
}

.monitor-token-panel p {
  margin: 5px 0 10px;
  color: #e8d895;
  font-size: 0.84rem;
}

.monitor-token {
  display: block;
  padding: 10px;
  border-radius: 7px;
  color: #fff8db;
  background: #16130b;
  overflow-wrap: anywhere;
  user-select: all;
}

.monitor-token-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.admin-monitor-list {
  display: grid;
  gap: 8px;
}

.admin-monitor-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #2c3d57;
  border-radius: 10px;
  background: #152238;
}

.admin-monitor-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
}

.admin-monitor-id {
  color: #8294ad;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.admin-monitor-state {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-monitor-state.online {
  color: #b7f7d0;
  background: #17432f;
}

.admin-monitor-state.offline,
.admin-monitor-state.revoked {
  color: #fecaca;
  background: #4b2028;
}

.admin-monitor-actions {
  display: flex;
  flex-shrink: 0;
  gap: 7px;
}

/* Court overlays */
.platz-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: rgba(3, 8, 18, 0.76);
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 9000;
}

.platz-overlay-box {
  width: min(100%, 760px);
  max-height: min(100%, 760px);
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.platz-overlay-title {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  padding: 16px;
  border-bottom: 1px solid #e6e6e6;
  color: #222;
}

.platz-overlay-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.platz-overlay-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 18px;
  border: 2px solid #e6e6e6;
  border-radius: 8px;
  background: #f8f9fa;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.platz-overlay-option:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.platz-overlay-option.selected {
  background: #d1e7dd;
  border-color: #198754;
}

.platz-overlay-paarung {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
}

.platz-overlay-bewerb {
  font-size: 0.85rem;
  color: #888;
  margin-top: 2px;
}

.platz-overlay-status {
  min-height: 1.35em;
  padding: 0 16px;
  color: #526173;
  font-size: 0.85rem;
  text-align: center;
}

.platz-overlay-status[data-type="error"] {
  color: #b4232f;
}

.platz-overlay-status[data-type="success"] {
  color: #187244;
}

.platz-overlay-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid #e6e6e6;
}

.platz-overlay-btn {
  padding: 10px 32px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.platz-overlay-btn.submit {
  background: #198754;
  color: #fff;
}

.platz-overlay-btn.submit:hover {
  background: #157347;
}

.platz-overlay-btn.cancel {
  background: #6c757d;
  color: #fff;
}

.platz-overlay-btn.cancel:hover {
  background: #5a6268;
}

.platz-overlay-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Court activation */
.aktivierung-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.platz-aktivierung-btn {
  width: 80%;
  padding: 24px;
  font-size: 1.4rem;
  font-weight: 700;
  border: 3px solid;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  font-family: inherit;
}

.platz-aktivierung-btn.aktivierung-active {
  background: #d1e7dd;
  border-color: #198754;
  color: #198754;
}

.platz-aktivierung-btn.aktivierung-active:hover {
  background: #badbcc;
}

.platz-aktivierung-btn.aktivierung-inactive {
  background: #f8d7da;
  border-color: #dc3545;
  color: #dc3545;
}

.platz-aktivierung-btn.aktivierung-inactive:hover {
  background: #f1c1c6;
}

.platz-aktivierung-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.navigator-scroll-controls {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: min(calc(100% - 28px), 1572px);
  display: flex;
  gap: 1px;
  z-index: 190;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: #0d1524;
  transform: translateX(-50%);
}

.navigator-scroll-controls button {
  flex: 1;
  height: 58px;
  border: 1px solid #2e6ea7;
  background: #154f82;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.15s;
}

.navigator-scroll-controls button:first-child {
  border-radius: 11px 0 0 11px;
}

.navigator-scroll-controls button:last-child {
  border-radius: 0 11px 11px 0;
}

.navigator-scroll-controls button:hover:not(:disabled) {
  background: #0b5ed7;
}

.navigator-scroll-controls button:active:not(:disabled) {
  background: #0948a3;
}

.navigator-scroll-controls button.command-pending,
.navigator-scroll-controls button.command-sending {
  color: #fff3b2;
  border-color: #d09a1b;
  background: #76550e;
}

.navigator-scroll-controls button.command-success {
  border-color: #37b36d;
  background: #17623a;
}

.navigator-scroll-controls button.command-failed {
  border-color: #df6875;
  background: #762c38;
}

.navigator-scroll-controls button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .navigator-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .navigator-live-status {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .navigator-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .navigator-app {
    padding: 8px 8px 78px;
  }

  .navigator-toolbar {
    position: static;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .navigator-live-status {
    grid-column: auto;
    justify-content: flex-start;
  }

  .navigator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 0;
  }

  .navigator-scroll-controls {
    width: calc(100% - 16px);
  }

  .nav-btn {
    min-height: 72px;
  }

  .admin-monitor-heading,
  .admin-monitor-row {
    align-items: stretch;
    flex-direction: column;
  }

  .monitor-provision-form {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .monitor-provision-form label {
    grid-column: auto;
  }

  .admin-monitor-actions > button {
    flex: 1;
  }

  .platz-overlay {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .platz-overlay-box {
    width: 100%;
    max-height: 100%;
  }

  .platz-overlay-title {
    padding: 12px;
    font-size: 1.1rem;
  }

  .platz-overlay-actions {
    gap: 8px;
    padding: 12px;
  }

  .platz-overlay-btn {
    flex: 1;
    padding: 10px 12px;
  }
}

/* -------------------------------------------------- */
/*  MONITOR                                            */
/* -------------------------------------------------- */

.monitor-body {
  width: 100vw;
  height: 100vh;
  background: #111;
  overflow: hidden;
}

.monitor-stage,
.monitor-frame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.monitor-stage {
  z-index: 1;
  background: #080b10;
}

.monitor-frame {
  border: none;
  background: #fff;
}

.monitor-frame-active {
  z-index: 1;
  visibility: visible;
}

.monitor-frame-candidate {
  z-index: 2;
  visibility: hidden;
  pointer-events: none;
}

.monitor-overlay {
  position: fixed;
  top: 54px;
  left: 50%;
  z-index: 35;
  width: max-content;
  max-width: min(90vw, 620px);
  padding: 9px 14px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 9px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  font-size: 0.88rem;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.monitor-overlay[data-state="failed"] {
  color: #fecaca;
  border-color: #9f4350;
  background: rgba(76, 22, 31, 0.94);
}

.monitor-overlay-empty {
  top: 50%;
  padding: 18px 24px;
  font-size: clamp(1rem, 3vw, 1.5rem);
  transform: translate(-50%, -50%);
}

.monitor-overlay[hidden] {
  display: none !important;
}

.monitor-enrollment {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(37, 99, 235, 0.25), transparent 35rem),
    #090e17;
}

.monitor-enrollment[hidden] {
  display: none !important;
}

.monitor-enrollment-card {
  width: min(100%, 520px);
  max-height: 100%;
  overflow: auto;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid #334155;
  border-radius: 18px;
  color: #e5edf8;
  background: #111c2d;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.48);
}

.monitor-enrollment-kicker {
  margin: 0 0 5px;
  color: #79c6ff;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.monitor-enrollment-card h1 {
  margin: 0 0 12px;
  color: #f8fafc;
}

.monitor-enrollment-card > p:not(.monitor-enrollment-kicker):not(.monitor-enrollment-status) {
  color: #aebdd1;
  line-height: 1.55;
}

.monitor-enrollment-card label {
  display: block;
  margin: 20px 0 6px;
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 700;
}

.monitor-enrollment-card input {
  width: 100%;
  min-height: 46px;
  padding: 9px 11px;
  border: 1px solid #41536d;
  border-radius: 8px;
  color: #f8fafc;
  background: #0b1422;
  font: 1rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

.monitor-enrollment-card button {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  border: 0;
  border-radius: 8px;
  color: #07111e;
  background: #79c6ff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.monitor-enrollment-card button:disabled {
  opacity: 0.5;
  cursor: wait;
}

.monitor-enrollment-status {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: #aebdd1;
  font-size: 0.84rem;
}

.monitor-enrollment-status[data-state="error"] {
  color: #fca5a5;
}

.monitor-enrollment-status[data-state="success"] {
  color: #86efac;
}

@media (max-width: 640px) {
  .monitor-overlay {
    top: 50px;
  }

  .monitor-overlay-empty {
    top: 50%;
  }
}

/* -------------------------------------------------- */
/*  LOADING OVERLAY (global)                           */
/* -------------------------------------------------- */

.loading-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 9500;
  transition: opacity 0.4s ease;
}
.loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.loading-overlay.error {
  background: rgba(255, 255, 255, 0.95);
}
.loading-overlay-content {
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid var(--table-border, #e6e6e6);
  border-top: 5px solid var(--accent, #0b57d0);
  border-radius: 50%;
  animation: loading-spin 0.8s linear infinite;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}
.loading-text {
  font-size: 1rem;
  color: var(--muted, #666);
  text-align: center;
}
.loading-error-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-retry-btn {
  padding: 10px 28px;
  border: none;
  border-radius: 8px;
  background: var(--accent, #0b57d0);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.loading-retry-btn:hover {
  background: #0948a3;
}

.ranking-data-warning {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #b45309;
  border-radius: 8px;
  background: #fff7ed;
  color: #7c2d12;
  font-weight: 600;
}

.ranking-data-warning[hidden] {
  display: none;
}