:root {
  --km-black: #14110f;
  --km-gold: #c9a227;
  --km-gold-soft: #e6c85c;
  /* Gold (#c9a227) on white is ~2.4:1 — fails WCAG AA for text (needs
     4.5:1). Kept for backgrounds/borders (black text on gold is ~8:1, fine)
     but any place gold is used AS TEXT on a light background uses this
     darker variant instead (~4.6:1). */
  --km-gold-text: #7a5f13;
  --km-bg: #faf8f4;
  --km-card: #ffffff;
  --km-border: #e3ddd0;
  --km-text: #241f1a;
  --km-muted: #6b6255;
  --km-error: #b3261e;
  --km-error-bg: #fdecea;
}

* { box-sizing: border-box; }

/* Several elements this app toggles via el.hidden also carry a class that
   sets `display: flex/grid` unconditionally (e.g. .field-row,
   .formats-age-columns) — an author-stylesheet display rule beats the
   browser's built-in [hidden]{display:none}, silently keeping the element
   visible. This global safety net makes el.hidden always win, everywhere,
   instead of patching every such class one at a time. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--km-bg);
  color: var(--km-text);
  line-height: 1.45;
}

.km-header {
  background: var(--km-black);
  color: #fff;
  padding: 14px 0;
}
.km-header__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.km-header__event strong {
  color: var(--km-gold-soft);
  display: block;
  font-size: 1.05rem;
}
.km-header__event span {
  color: #cfc7b8;
  font-size: 0.85rem;
}
.lang-switch {
  color: var(--km-gold-soft);
  border: 1px solid var(--km-gold);
  border-radius: 6px;
  padding: 4px 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}
.lang-switch:hover { background: var(--km-gold); color: var(--km-black); }

.km-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}
.km-main h1 {
  font-size: 1.25rem;
  margin: 0 0 12px;
}

.km-card {
  background: var(--km-card);
  border: 1px solid var(--km-border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin-bottom: 14px;
}
.entry-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: -1px;
}
.entry-type-tab {
  background: var(--km-bg);
  border: 1px solid var(--km-border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--km-muted);
  cursor: pointer;
}
@media (max-width: 480px) {
  /* 4 tabs (one of them "Синхро-група / Формация") don't fit one row on a
     narrow phone — wrap into 2 rows rather than overflowing or clipping. */
  .entry-type-tab { flex: 1 1 calc(50% - 6px); padding: 8px 10px; font-size: 0.82rem; text-align: center; }
}
.entry-type-tab.is-active {
  background: var(--km-card);
  color: var(--km-black);
  border-color: var(--km-gold);
  position: relative;
  z-index: 1;
}
.km-card h2 {
  font-size: 1rem;
  margin: 0 0 10px;
  color: var(--km-black);
  display: flex;
  align-items: center;
  gap: 6px;
}

.field { margin-bottom: 10px; }
.field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 5px;
}

.field-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.field-row > .field { flex: 1 1 180px; }
.field-narrow { flex: 0 0 130px; }
.field-btn { flex: 0 0 auto; align-self: flex-end; }

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search], select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--km-border);
  border-radius: 6px;
  font-size: 0.95rem;
  background: #fff;
  color: var(--km-text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--km-gold);
  outline-offset: 1px;
  border-color: var(--km-gold);
}

/* --- Info ("i") icon + popover: works on tap AND click, not just hover --- */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--km-gold-text);
  color: var(--km-gold-text);
  background: #fff;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  position: relative;
  flex: 0 0 auto;
}
.info-icon:hover, .info-icon:focus, .info-icon[aria-expanded="true"] {
  background: var(--km-gold);
  color: #fff;
  outline: none;
}
.info-popover {
  position: absolute;
  z-index: 40;
  max-width: 280px;
  background: var(--km-black);
  color: #f4efe4;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  top: 100%;
  left: 0;
  margin-top: 6px;
}
.info-popover::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 8px;
  width: 10px;
  height: 10px;
  background: var(--km-black);
  transform: rotate(45deg);
}

/* --- Field-level error messages --- */
.field-error {
  display: block;
  min-height: 0;
  color: var(--km-error);
  font-size: 0.78rem;
  margin-top: 4px;
}
.field-error:empty { display: none; }
.birth-year-age-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--km-muted, #8a7f6a);
  margin-top: 4px;
}
.birth-year-age-hint:empty { display: none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--km-error);
  background: var(--km-error-bg);
}

.notice-ok {
  background: #e6f4ea;
  border: 1px solid #1e7b34;
  color: #1e7b34;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-weight: 600;
}
.general-error {
  background: var(--km-error-bg);
  border: 1px solid var(--km-error);
  color: var(--km-error);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-weight: 600;
}
.general-notice {
  background: #eaf6ea;
  border: 1px solid #2f6a3a;
  color: #2f6a3a;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-weight: 600;
}
/* Compact round arrow (its text label moves to title/aria-label in
   ui-helpers.js) — the old full-width pill covered checkboxes and the
   "Разпечатай" button on phones (tester report, 2026-09-28). */
#back-to-top {
  position: fixed; right: 14px; bottom: 14px; z-index: 20;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  font-size: 1.35rem; line-height: 1; opacity: 0.9;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
body.has-draft-bar #back-to-top { bottom: 84px; }
/* Sticky "Добави" bar (form.js updateDraftUi). */
.draft-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--km-black, #15110d); color: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
  font-weight: 600;
}
.draft-bar .btn { margin: 0; }
body.has-draft-bar { padding-bottom: 76px; }
.staged-country-line { color: var(--km-muted); font-size: 0.9em; }
.form-hint {
  color: var(--km-muted);
  font-size: 0.85rem;
  background: #f6f2e8;
  border: 1px solid var(--km-border);
  border-radius: 8px;
  padding: 8px 14px;
  margin: 0 0 16px;
}

.btn {
  border: none;
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  /* 44px is the usual minimum comfortable touch target — padding alone gets
     close, this guarantees it regardless of the label's own text length. */
  min-height: 38px;
}
.btn:focus-visible {
  outline: 2px solid var(--km-black);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--km-gold);
  color: var(--km-black);
  font-size: 0.95rem;
  padding: 10px 22px;
}
.btn-primary:hover { background: var(--km-gold-soft); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-primary:focus-visible { outline-color: var(--km-black); }
.btn-secondary {
  background: #f1ede2;
  color: var(--km-black);
  border: 1px solid var(--km-border);
}
.btn-secondary:hover { background: #e6e0cf; }
.btn-remove {
  background: transparent;
  color: var(--km-error);
  border: 1px solid var(--km-error);
}
.btn-remove:hover { background: var(--km-error-bg); }
.btn-remove:focus-visible { outline-color: var(--km-error); }

.dancer-row, .entry-row {
  border: 1px solid var(--km-border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background: #fdfcf9;
}

.members-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.members-picker label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--km-border);
  border-radius: 20px;
  padding: 5px 12px;
  font-weight: 400;
  font-size: 0.85rem;
  cursor: pointer;
  background: #fff;
}
.members-picker input[type=checkbox] { width: auto; }
.members-picker label.checked {
  border-color: var(--km-gold);
  background: #fbf3dc;
}

.field-checkbox .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  font-size: 0.9rem;
  cursor: pointer;
}
.field-checkbox input[type=checkbox] {
  width: auto;
  margin-top: 3px;
  flex: 0 0 auto;
}
.field-checkbox .info-icon { margin-top: 1px; }

/* Same name, different birth year — stays red until fixed (2026-10-26). */
.participant-group--clash { border: 2px solid var(--km-error); background: var(--km-error-bg); }
.year-clash { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #fff; border-left: 4px solid var(--km-error); color: var(--km-error); font-weight: 600; font-size: 0.92rem; }
.staged-row--clash > td { background: var(--km-error-bg); }
.year-clash-note { color: var(--km-error); font-size: 0.85rem; font-weight: 700; margin-top: 4px; }

.fee-uplift-note { color: var(--km-gold-text); font-size: 0.85rem; font-weight: 600; margin-top: 4px; }

/* „Как работи регистрацията“ — a clearly visible card instead of a small
   top-nav link (owner, 2026-10-26: „да се вижда по-ясно“). */
.guide-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 18px;
  padding: 14px 18px;
  border: 2px solid var(--km-gold);
  border-radius: 12px;
  background: #fbf6e8;
  color: var(--km-text);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(122, 95, 19, 0.12);
  transition: background 0.15s, box-shadow 0.15s;
}
.guide-callout:hover, .guide-callout:focus-visible {
  background: #f7edd2;
  box-shadow: 0 4px 14px rgba(122, 95, 19, 0.2);
}
.guide-callout__icon { font-size: 1.8rem; line-height: 1; flex: none; }
.guide-callout__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.guide-callout__text strong { font-size: 1.12rem; color: var(--km-gold-text); }
.guide-callout__text span { font-size: 0.92rem; color: var(--km-muted); }
.guide-callout__arrow { font-size: 1.5rem; font-weight: 700; color: var(--km-gold-text); flex: none; }
@media (max-width: 560px) {
  .guide-callout { padding: 12px 14px; gap: 10px; }
  .guide-callout__text strong { font-size: 1rem; }
}

.dnb-cta {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--km-gold);
  border-radius: 10px;
  background: #fbf6e8;
}
.dnb-cta h2 {
  font-size: 0.95rem;
  margin: 0 0 6px;
}
.dnb-cta p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--km-muted);
}

.back-link {
  display: inline-flex;
  align-items: center;
  color: var(--km-gold-text);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 8px;
  /* Bigger than the text alone needs — a comfortable touch target, not just
     a legible one (owner flagged these as "почти незабележими", 2026-09-24). */
  padding: 6px 4px;
}
.back-link:hover, .back-link:focus-visible { color: var(--km-black); text-decoration: underline; }

.suggested-tag {
  color: var(--km-gold-text);
  font-weight: 600;
}

/* --- New participant wizard (2026-09-16 redesign) --- */
.km-card h3 {
  font-size: 0.95rem;
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.formats-placeholder {
  color: var(--km-muted);
  font-size: 0.88rem;
  font-style: italic;
}
.formats-group {
  border: 1px solid var(--km-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fdfcf9;
}
.formats-group h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--km-black);
}
.class-locked-note {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--km-error);
}
.btn-link-toggle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--km-gold-text);
  text-decoration: underline;
  cursor: pointer;
}
.btn-link-toggle:hover { color: var(--km-black); }
.formats-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.formats-style-row + .formats-style-row {
  margin-top: 8px;
}
.format-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--km-border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  background: #fff;
}
.format-checkbox input[type=checkbox], .format-checkbox input[type=radio] { width: 20px; height: 20px; flex: 0 0 auto; cursor: pointer; }
/* Latin (pale pink) vs Standard (light blue) tint, purely visual grouping */
.style-row-LAT .format-checkbox { background: #fdeaf1; border-color: #f2c2d8; }
.style-row-STT .format-checkbox { background: #e7f2fc; border-color: #b9dcf4; }
/* Първи стъпки's complex gets its own pale green tint (it's MIXED style,
   so it had no tint at all before), overriding the LAT/STT rules above. */
.formats-style-row .format-checkbox.is-complex { background: #eaf6ea; border-color: #bfe0bf; }
.format-checkbox:has(input:checked) {
  border-color: var(--km-gold);
  background: #fbf3dc;
}
.format-checkbox.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.formats-age-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.formats-age-column {
  flex: 1 1 220px;
  min-width: 200px;
}
.formats-age-column + .formats-age-column {
  border-left: 1px solid var(--km-border);
  padding-left: 16px;
}
.formats-age-column h5 {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--km-black);
}

#staged-list {
  overflow-x: auto;
}
table.reg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
table.reg-table th, table.reg-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--km-border);
  vertical-align: top;
}
table.reg-table th {
  background: #f6f2e8;
  font-weight: 600;
}
table.reg-table .formats-cell div + div {
  margin-top: 3px;
}
table.reg-table .participant-name {
  font-weight: 700;
}
.type-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 4px;
}
.type-badge-solo { background: #e7f2fc; color: #1a5a8a; }
.type-badge-couple { background: #fdeaf1; color: #9a2f5c; }
.type-badge-synchro_duo { background: #eaf6ea; color: #2f6a3a; }
.type-badge-group,
.type-badge-synchro_group_small, .type-badge-synchro_group_large1, .type-badge-synchro_group_large2,
.type-badge-formation_girls, .type-badge-formation_couples,
.type-badge-shou_tantz_group { background: #f3ecfb; color: #5b3a91; }
.club-fee-total {
  text-align: right;
  font-weight: 700;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid var(--km-border);
}
/* Fee sits inline on the SAME line as its format, so it can never drift out
   of sync with it even when the format text wraps onto a second line. */
table.reg-table .format-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
/* min-width: 0 overrides the flex-item default (min-width: auto), which
   otherwise refuses to shrink below the text's own intrinsic width — with
   long format names that silently forced the whole row (and the table)
   wider than its container, spilling the fee out past the visible table. */
table.reg-table .format-text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
table.reg-table .format-fee {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--km-muted);
}
/* guide.php — first-time-coach walkthrough */
.guide-tldr {
  background: #fbf6e9;
  border: 1px solid var(--km-gold);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.guide-tldr h2 { margin-top: 0; }
.guide-tldr ol { margin: 0; padding-left: 20px; }
.guide-tldr li { margin-bottom: 6px; }
.guide-step { display: flex; gap: 16px; align-items: flex-start; }
.guide-step-num {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--km-black);
  color: var(--km-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}
.guide-step-body { flex: 1 1 auto; min-width: 0; }
.guide-step-body h2 { margin-top: 0; margin-bottom: 8px; }
.guide-faq dt { font-weight: 700; margin-top: 14px; }
.guide-faq dt:first-child { margin-top: 0; }
.guide-faq dd { margin: 4px 0 0; color: var(--km-muted); }
@media (max-width: 480px) {
  .guide-step { gap: 12px; }
  .guide-step-num { width: 30px; height: 30px; font-size: 1rem; }
}

.staged-name-highlight {
  background: var(--km-gold, #e8c468);
  color: var(--km-black, #1a1a1a);
  border-radius: 3px;
  padding: 0 2px;
}
/* Jump target after a failed submit — scrolled into view and pulsed so the
   coach's eye lands on the EXACT staged-list row that needs fixing, instead
   of having to hunt for it by name in a long list. */
table.reg-table tr.is-jump-target {
  animation: km-jump-pulse 1.6s ease-in-out 3;
}
@keyframes km-jump-pulse {
  0%, 100% { background: transparent; box-shadow: none; }
  50% { background: #fbf3dc; box-shadow: inset 0 0 0 2px var(--km-gold, #e8c468); }
}
/* Same jump-pulse, generalized to a group/formation member row that failed
   in-draft validation (not a staged-list <tr>) — same purpose, different
   markup shape. */
.group-member-row.is-jump-target {
  animation: km-jump-pulse 1.6s ease-in-out 3;
  border-radius: 8px;
}
/* Same jump-pulse, generalized to any plain .field/.field-checkbox wrapper —
   covers validate()'s pre-flight errors (e.g. the declaration checkbox) and
   showFailure()'s field-level errors, not just staged-list rows/members. */
.field.is-jump-target, .field-checkbox.is-jump-target {
  animation: km-jump-pulse 1.6s ease-in-out 3;
  border-radius: 8px;
}
/* A "Добави…" button the coach forgot to press before "Подай заявката" —
   a ring pulse rather than km-jump-pulse, whose transparent background
   keyframes would blank out the button's own fill. */
.btn.is-jump-target {
  animation: km-btn-pulse 1s ease-in-out 5;
}
@keyframes km-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 196, 104, 0); }
  50% { box-shadow: 0 0 0 6px rgba(232, 196, 104, 0.75); }
}
table.reg-table .format-line-filtered-note {
  color: var(--km-muted);
  font-style: italic;
  font-size: 0.85em;
}
table.reg-table .fee-total {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--km-border);
  font-weight: 600;
  text-align: right;
}

@media print {
  .no-print, .km-header, .back-link, #general-error, .dnb-cta {
    display: none !important;
  }
  body { background: #fff; }
  .km-card { border: none; padding: 0; }
}

@media (max-width: 600px) {
  .field-row { flex-direction: column; }
  /* In column direction flex-basis sets a MINIMUM HEIGHT, not width — the
     180px basis on .field-row > .field (meant for side-by-side desktop
     layout) was leaving huge empty vertical gaps under Име/Фамилия. */
  .field-row > .field, .field-narrow { flex: 1 1 auto; }

  /* Slightly tighter still on a phone than the already-trimmed desktop
     spacing — every screenful counts more on a small viewport. */
  .km-main { padding: 14px 12px 32px; }
  .km-card { padding: 12px 14px 14px; margin-bottom: 10px; }
  .km-main h1 { font-size: 1.1rem; }

  /* The border/padding between age-group columns is a desktop-only visual
     separator — once columns stack in ONE column (formats-age-columns
     already wraps via flex-wrap), a left border+indent just looks like a
     stray vertical line with no columns either side of it to separate. */
  .formats-age-column + .formats-age-column {
    border-left: none;
    padding-left: 0;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--km-border);
  }

  /* The staged-list/edit-entry tables can't reasonably reflow into cards
     without a bigger rework — shrinking the font a bit buys real column
     width back before falling to the horizontal-scroll fallback. */
  table.reg-table { font-size: 0.82rem; }

  /* Less reading before the first field on a phone (tester report,
     2026-09-28: "Име" started ~1.5 screens down). The 4 page links become
     one compact wrapped line, hint boxes get tighter. */
  .top-nav { line-height: 1.5; margin: 0 0 8px; }
  /* Still bold gold (owner wanted these clearly visible, 2026-09-24) —
     only the per-link bottom margin that stacked them one per row goes. */
  .top-nav .back-link { font-size: 0.85rem; margin-bottom: 0; padding: 4px 2px; }
  .form-hint { font-size: 0.78rem; padding: 6px 10px; margin-bottom: 10px; }
  .draft-bar { font-size: 0.9rem; gap: 10px; }
}
.form-hint-inline { display: block; color: var(--km-muted); font-size: 0.82rem; margin-top: 4px; }

/* ===== Личен кабинет (dashboard redesign, 2026-09-29) ===== */
.print-only { display: none; }
@media print { .print-only { display: block; } }
.dash-print-meta { color: var(--km-muted); font-size: 0.85rem; margin: 0 0 4px; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-head h1 { margin: 0 0 4px; }
.dash-intro { margin: 0; color: var(--km-muted); max-width: 62ch; }
.dash-cta { font-size: 1.05rem; padding: 12px 22px; }

.dash-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.dash-stat { background: var(--km-card); border: 1px solid var(--km-border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.dash-stat__value { font-size: 1.45rem; font-weight: 700; color: var(--km-black); line-height: 1.2; }
.dash-stat__label { font-size: 0.8rem; color: var(--km-muted); }
.dash-stat--accent { border-color: var(--km-gold); background: #fbf6e6; }

.dash-section-title { font-size: 1.05rem; margin: 0 0 10px; }
.dash-count { color: var(--km-muted); font-weight: 400; }
.dash-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 26px 0 10px; }
.dash-section-head .dash-section-title { margin: 0; }

.dash-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dash-tile { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon title" "icon desc"; column-gap: 12px; align-items: center;
  background: var(--km-card); border: 1px solid var(--km-border); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--km-text);
  transition: border-color .15s, box-shadow .15s; }
.dash-tile:hover, .dash-tile:focus-visible { border-color: var(--km-gold); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.dash-tile__icon { grid-area: icon; font-size: 1.4rem; }
.dash-tile__title { grid-area: title; font-weight: 700; color: var(--km-black); }
.dash-tile__desc { grid-area: desc; font-size: 0.82rem; color: var(--km-muted); }
.dash-tile__desc.is-ok { color: #2f6a3a; }

.participant-group__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.participant-group__name { margin: 0 0 4px; font-size: 1rem; color: var(--km-black); }
.participant-group__total { font-weight: 700; white-space: nowrap; }
.participant-group__clubs { margin: 0 0 8px; font-size: 0.82rem; color: var(--km-muted); }
.dash-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 6px; }
.dash-table th, .dash-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--km-border); vertical-align: top; }
.dash-table th { background: #f6f2e8; font-weight: 600; }
.dash-table .c-date { color: var(--km-muted); font-size: 0.8rem; white-space: nowrap; }
.dash-table .c-fee { white-space: nowrap; font-weight: 600; }
.dash-table .c-actions { white-space: nowrap; text-align: right; }
.dash-table .c-actions form { display: inline; }
.btn-small { padding: 4px 10px; font-size: 0.8rem; margin-left: 4px; }
.dash-empty { text-align: center; padding: 24px; }

.dash-due { margin-top: 16px; border-color: var(--km-gold); }
.dash-due__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dash-due__label { font-weight: 700; font-size: 1.05rem; }
.dash-due__value { font-weight: 800; font-size: 1.5rem; color: var(--km-black); }
.dash-due__sub { margin: 4px 0 0; color: var(--km-muted); font-size: 0.85rem; text-align: right; }
.dash-due__payment { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--km-border); font-size: 0.85rem; color: var(--km-muted); }

@media (max-width: 800px) {
  .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dash-stats .dash-stat:last-child { grid-column: 1 / -1; }
  .dash-stat__value { font-size: 1.2rem; }
  .dash-tiles { grid-template-columns: 1fr; }
  .dash-cta { width: 100%; text-align: center; }
  /* Each entry becomes a compact block — the table's last columns (fee,
     Редактирай/Отмени) used to be cut off on a phone. */
  .dash-table thead { display: none; }
  .dash-table, .dash-table tbody { display: block; }
  .dash-table tr { display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "class fee" "age fee" "dance dance" "date date" "actions actions";
    column-gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--km-border); }
  .dash-table td { border: none; padding: 1px 0; }
  .dash-table .c-class { grid-area: class; font-weight: 700; }
  .dash-table .c-age { grid-area: age; }
  .dash-table .c-dance { grid-area: dance; }
  .dash-table .c-date { grid-area: date; }
  .dash-table .c-fee { grid-area: fee; align-self: start; font-size: 1rem; }
  .dash-table .c-actions { grid-area: actions; text-align: left; padding-top: 6px; }
  .dash-table .c-actions .btn-small { margin: 0 6px 0 0; padding: 7px 14px; font-size: 0.85rem; }
  .dash-due__value { font-size: 1.3rem; }
}
@media print {
  .dash-table .c-actions { display: none; }
}
@media (max-width: 600px) {
  /* Search full width, the two filter buttons side by side under it. */
  #dashboard-filters { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  #dashboard-filters > .field:first-child { flex: 1 1 100%; }
  #dashboard-filters > .field-btn { flex: 1 1 0; }
  #dashboard-filters > .field-btn .btn { width: 100%; }
  .dash-section-head { align-items: flex-start; }
}

/* Promo code card (lib/promo.php → promo_box_html, assets/js/promo.js). */
.promo-box {
  margin: 20px 0;
  padding: 16px 18px;
  border: 1px solid var(--km-gold);
  border-radius: 10px;
  background: #fbf6e8;
}
.promo-box h2 { font-size: 1rem; margin: 0 0 8px; }
.promo-box p { margin: 0 0 10px; font-size: 0.9rem; }
.promo-box__lead, .promo-box__hint { color: var(--km-muted); }
.promo-box__hint { font-size: 0.82rem !important; }
.promo-box__applied { font-weight: 700; color: #1e7b34; }
.promo-box__form label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.promo-box__row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.promo-box__row input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--km-border);
  border-radius: 8px;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.promo-box__dnb { border-top: 1px solid var(--km-border); padding-top: 12px; }
.promo-box__dnb a:not(.btn) { color: var(--km-gold-text); font-weight: 600; }
.promo-box__buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.promo-box__help { margin-bottom: 0 !important; }
.promo-box button[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.dash-due__row--minor .dash-due__label, .dash-due__row--minor .dash-due__value { font-size: 0.95rem; font-weight: 600; color: var(--km-muted); }
.dash-due__row--minor { margin-bottom: 4px; }
.dash-due__invoice { margin: 8px 0 0; text-align: right; font-size: 0.9rem; }
.dash-due__invoice a { color: var(--km-gold-text); font-weight: 700; }

/* Promo banner at the top of the form page and „Моите регистрации“. */
.promo-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 0 0 18px; padding: 12px 16px;
  background: linear-gradient(135deg, #fff4cf, #f6e3a1); border: 2px solid var(--km-gold);
  border-radius: 12px; font-size: 0.95rem; box-shadow: 0 2px 10px rgba(201, 162, 39, 0.18);
}
.promo-banner__text { flex: 1 1 320px; }
.promo-banner__text strong { font-size: 1.05rem; }
.promo-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.promo-banner__how { color: var(--km-gold-text); font-weight: 600; font-size: 0.85rem; }
.promo-banner--ok { display: block; background: #e6f4ea; border-color: #1e7b34; color: #1e7b34; font-weight: 700; box-shadow: none; }
#promo-box { scroll-margin-top: 16px; }
.promo-box__step { font-weight: 600; }
.promo-box__code { margin: 12px 0 8px; font-size: 0.88rem; }
.promo-box__code summary { cursor: pointer; color: var(--km-gold-text); font-weight: 600; }
.promo-box__code .promo-box__row { margin: 8px 0 0; }
.promo-banner--wait { background: #fff8e6; box-shadow: none; }
.club-fee-total--promo { color: #1e7b34; font-weight: 700; }
.form-hint--box { border: 1px solid var(--km-border); background: #f7f3ea; border-radius: 8px; padding: 8px 12px; margin-top: 6px; }

/* Organizer editing a club's list as its coach (admin/act-as.php). */
.admin-as-bar { background: #fff4d6; border: 2px solid var(--km-gold, #c9a227); border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; font-size: 0.9rem; line-height: 1.5; }
.admin-as-bar a { font-weight: 700; white-space: nowrap; }
.dash-table .c-actions .admin-wd { display: block; width: 100%; margin: 4px 0 0; text-align: center; }
@media (max-width: 640px) { .dash-table .c-actions .admin-wd { display: inline-block; width: auto; margin: 6px 6px 0 0; } }

/* Coaches' children — free entry (coach-children.php). */
.dash-tile--wide { grid-column: 1 / -1; }
.dash-tile--gift { background: #fff8e6; border-color: var(--km-gold, #c9a227); }
.free-kid { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: #eef7ee; color: #1e6b30; font-size: 0.88rem; font-weight: 600; }
.kids-intro { color: var(--km-muted); max-width: 70ch; }
.kids-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.kids-table th, .kids-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--km-border); vertical-align: middle; }
.kids-table th { background: #f6f2e8; font-size: 0.85rem; }
.kids-table .kids-c-free { text-align: center; width: 1%; white-space: nowrap; }
.kids-table .kids-c-free input { width: 20px; height: 20px; }
.kids-table .kids-c-parent input { width: 100%; }
.kids-table tr.is-free td { background: #f3faf3; }
.kids-table tr.has-error td { background: #fdf0ef; }
.kids-year { color: var(--km-muted); }
.kids-declare { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 14px; }
.kids-declare input { margin-top: 4px; flex: 0 0 auto; }
.kids-form .btn-primary { display: inline-block; }
.kids-waived { color: #1e6b30; font-weight: 600; }
@media (max-width: 640px) {
  .kids-table thead { display: none; }
  .kids-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--km-border); }
  .kids-table td, .kids-table tr.is-free td { border: 0; padding: 2px 6px; background: transparent; }
  .kids-table tr.is-free { background: #f3faf3; border-radius: 8px; }
  .kids-table .kids-c-parent { grid-column: 1 / -1; }
}