/* ===== SLOTH — Card Components (appointment-card, athlete-card, ticket-card, ttc, …) ===== */

/* ── Card Entry Animation ───────────────────────────────── */
@keyframes card-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Generic Card Shell ─────────────────────────────────── */
.item {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ── Appointment Card ───────────────────────────────────── */
.appointment {
  display: flex;
  flex-direction: column;
}



.appointment-card-header-frame-parent {
  width: 100%;
  position: relative;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background-color: var(--bg-card);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-2) var(--space-5);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: background-color var(--ease-base);
}

.appointment-card-body-2024-parent {
  width: 100%;
  position: relative;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background-color: var(--bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-5);
  box-sizing: border-box;
  text-align: left;
  font-size: var(--text-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
  text-decoration: none;
  transition: background-color var(--ease-fast);
}

.appointment-card-body-2024-parent:hover {
  background-color: var(--bg-surface);
}

.appointment-card-header-frame-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.appointment-card-header-assign-user-solid-parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  width: 50%;
}

.appointment-card-header-sign-in-line-parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  width: 50%;
}

.appointment-card-header-assign-user-solid-icon {
  width: 1.25rem;
  height: 1.25rem;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--ease-fast);
}

.appointment-card-header-assign-user-solid-icon:hover {
  opacity: 1;
}

.appointment-card-header-vector-icon {
  width: 1.1rem;
  height: 1.1rem;
  opacity: 0.6;
  transition: opacity var(--ease-fast);
}

.appointment-card-header-vector-icon:hover {
  opacity: 1;
}

[data-theme="dark"] .appointment-card-header-assign-user-solid-icon,
[data-theme="dark"] .appointment-card-header-vector-icon {
  filter: invert(1);
}

.appointment-card-body-container {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.appointment-card-body-container1 {
  width: 100%;
  position: relative;
}

.appointment-card-body-text {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: 1.5;
}

/* ── Capacity Badge ─────────────────────────────────────── */
.appointment-card-capacity-parent {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 2.5rem;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-inverse);
}

.top-right {
  position: absolute;
}

.appointment-card-capacity-child {
  border-radius: var(--radius-full);
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
}

.appointment-card-capacity {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  mix-blend-mode: normal;
  font-size: var(--text-sm);
  font-weight: 700;
}

/* ── Athlete Card (ac) ──────────────────────────────────── */
.ac {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  overflow: visible;
  font-family: var(--font-sans);
  cursor: pointer;
  }

/* base.css [onclick]-tap-feedbackje a .ac-t is illeszti; kebab-nyomásra ne a teljes kártya animáljon. */
.ac:has(.card-km-btn:active, .card-km-item:active) {
  transform: none;
  filter: none;
}

.ac-header {
  display: flex;
  align-items: center;
  gap: var(--card-row-gap);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
}

.ac-avatar {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
}

.ac-avatar-wrap {
  display: inline-flex;
  flex-shrink: 0;
}

.ac-owner-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ac-badges {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.ac-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.18rem var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.ac-badge--own        { background: var(--badge-own-bg);        color: var(--badge-own-text); }
.ac-badge--shared-out { background: var(--badge-shared-bg);     color: var(--badge-shared-text); }
.ac-badge--shared-in  { background: var(--badge-shared-in-bg);  color: var(--badge-shared-in-text); }

.ac-shared {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0 var(--space-3) var(--space-3);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.ac-shared-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}

.ac-shared-label {
  font-weight: 600;
}

.ac-shared-user {
  color: var(--clr-blue-dark);
  text-decoration: none;
  font-weight: 600;
}

.ac-shared-user:hover {
  text-decoration: underline;
}

.ac-shared-sep {
  margin-left: -0.25rem;
}

.ac-body {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-3);
  gap: var(--space-2);
  background: var(--bg-card);
  transition: background-color var(--ease-base);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  position: relative;
}

/* When a shared-with row follows, the sections are separated by the card's
   standardized flex gap instead of per-section padding/borders. */
.ac:has(.ac-shared) {
  gap: var(--space-2);
}

.ac:has(.ac-shared) .ac-body {
  border-radius: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.ac-name-link {
  min-width: 0;
  text-decoration: none;
}

/* A hitbox a teljes kártya (::after), de a doboza csak a névé; a globális
   :active szabály (base.css) nélküle csak a nevet zsugorítaná — a kártya a
   .ac-en át (ős-propagáció) már megkapja a helyes, egységes zsugorodást. */
.ac-name-link:active {
  transform: none;
  filter: none;
}

/* A név találati felülete a törzs teljes doboza — keretig fent-lent, a .ac-right-ig
   oldalt (az z-index: 1); tisztán hitbox-változás, az elrendezés változatlan. */
.ac-name-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Megosztás-sorral a törzsnek nincs függőleges paddingja: a hitbox felfelé a fejléc
   keretéig fut ki. Lefelé nem — ott a .ac-shared linkjei állnak. */
.ac:has(.ac-shared) .ac-name-link::after {
  top: calc(-1 * var(--space-2));
}

/* A név és a csoport-jelvények EGY tördelő sort osztanak; a sortörés a tartalom szélességéből jön (frontend.md). */
.ac-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.ac-name-row {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
}

.ac-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-dob {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* min-width:0 so a wrapped strip can shrink to its own min-content — that is
   one badge — and wrap the rest underneath instead of overflowing the card. */
.ac-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}

.ac-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  /* A .ac-name-link::after fölött: pozicionált és a fastruktúrában utána áll.
     z-index NÉLKÜL — egy index itt rétegkontextust nyitna, és a kebab menüje
     (z-index: 200) bennragadna, a következő kártya kebabja alatt. */
  position: relative;
}

/* nowrap keeps a group's name on one line; the ellipsis is the backstop for the
   single name so long that even a line to itself cannot hold it. */
.ac-group-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--badge-own-text);
  background: var(--clr-green-light);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .ac-group-badge {
  background: var(--badge-own-bg);
}

.ac-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.ac-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--ease-fast), color var(--ease-fast);
}

.ac-btn:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

/* ── Ticket Card ────────────────────────────────────────── */
.ticket-card {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  background: var(--bg-card);
}


.ticket-card-header {
  align-self: stretch;
  position: relative;
  height: 2.5rem;
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
}

.ticket-card-header-container {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-2) var(--space-3);
  transition: background-color var(--ease-base);
}

.ticket-card-header-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.ticket-card-header-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.ticket-card-settings-icon {
  width: 1.1rem;
  height: 1.1rem;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--ease-fast);
}

.ticket-card-settings-icon:hover {
  opacity: 1;
}

[data-theme="dark"] .ticket-card-settings-icon {
  filter: invert(1);
}

.ticket-card-content {
  width: 100%;
  position: relative;
  height: 4rem;
}

.ticket-card-content-parent {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--bg-card);
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-3) var(--space-3);
  box-sizing: border-box;
  gap: var(--space-3);
  transition: background-color var(--ease-base);
}

.ticket-card-profile-picture {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--border);
}

.ticket-card-text {
  position: relative;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 700;
}

.ticket-card-secondary-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 400;
}

.ticket-card-status {
  position: absolute;
  top: 0;
  right: 0;
  height: 4rem;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  box-sizing: border-box;
  text-align: center;
  color: var(--text-inverse);
}

/* Uses count in full card body */
.tc-uses-count {
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1;
}

.tc-uses-total {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 0.05rem;
}

.ticket-card-content1 {
  width: 100%;
  position: relative;
  height: 3.5rem;
  text-align: right;
  background-color: var(--bg-card);
  transition: background-color var(--ease-base);
}

.ticket-card-content1-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--bg-card);
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--space-3) var(--space-3);
  box-sizing: border-box;
  transition: background-color var(--ease-base);
}

.ticket-card-content1-text {
  margin: 0;
}

.ticket-card-content1-text2 {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--bg-card);
  width: fit-content;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--space-3);
  box-sizing: border-box;
  text-align: left;
  transition: background-color var(--ease-base);
}

.ticket-card-content2 {
  width: 100%;
  position: relative;
  height: 2.813rem;
  text-align: center;
}

.ticket-card-content2-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-3);
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color var(--ease-fast);
}

.ticket-card-content2-info:hover {
  background-color: var(--bg-surface);
}

.ticket-card-dropdowns {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: var(--bg-card);
  transition: background-color var(--ease-base);
}

.ticket-card-details {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  box-sizing: border-box;
  gap: var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-card);
  transition: background-color var(--ease-base), border-color var(--ease-base);
}

.ticket-card-details-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.ticket-card-details-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--ease-fast);
}

.ticket-card-details-group:first-child {
  border-top: none;
}

.ticket-card-details-action {
  text-align: left;
}

.ticket-card-details-data {
  text-align: center;
}

.ticket-card-details-date {
  text-align: right;
}

.ticket-card-details-text {
  position: relative;
  color: var(--text-primary);
}

.ticket-card-note {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  box-sizing: border-box;
  gap: var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-card);
  transition: background-color var(--ease-base), border-color var(--ease-base);
}

/* ── Status Badges ──────────────────────────────────────── */
.ticket-status-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
    float: right;
}

.ticket-status-badge--pending {
  background: var(--badge-pending-bg);
  color: var(--text-inverse);
}

.ticket-status-badge--active {
  background: var(--badge-active-bg);
  color: var(--text-inverse);
}

.ticket-card-user-status {
  display: flex;
  gap: var(--space-2);
  float: right;
}

/* ── Ticket Card v2 (tc-*) ─────────────────────────────── */
.tc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  transition: background-color var(--ease-base);
    width: 100%;
}

[data-theme="dark"] .tc-header {
  background: var(--bg-muted);
}

.tc-header-left,
.tc-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tc-body {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  transition: background-color var(--ease-base);
    width: 100%;
}

.tc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.tc-athletes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
    justify-content: space-between;

}

.tc-athlete-name {
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.tc-ticket-name {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.tc-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: 0.15rem;
  min-width: 0;
}

/* User view: ticket name is primary, athlete name is secondary */
.tc-info--user .tc-athlete-name {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
}

.tc-info--user .tc-ticket-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  white-space: normal;
}

/* ── Compact ticket row ─────────────────────────────── */

/* A geometria szándékosan azonos a .appt-row-éval; a gap --card-row-gap-ből jön (frontend.md). */
.tc-compact-row {
  display: flex;
  align-items: center;
  gap: var(--card-row-gap);
  padding: var(--space-3);
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  cursor: pointer;
  user-select: none;
  transition: background var(--ease-fast);
  position: relative;
}


.tc-compact-row--expanded {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}


.tc-compact-main {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tc-compact-info {
  display: flex;
  flex-direction: column;
  gap: var(--card-text-gap);
  min-width: 0;
}

.tc-compact-athletes {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* Early Bird jel azon a sportolón, akiről szól; borostyán, nem az értesítés-narancs. */
.tc-eb-mark {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  vertical-align: -1px;
  color: var(--clr-yellow-dark);
}

.tc-compact-ticket {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PILL egy CÍMKE fölött, nem két szövegsor — ezért --card-badge-gap, nem --card-text-gap (frontend.md). */
.tc-compact-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--card-badge-gap);
  flex-shrink: 0;
  cursor: pointer;
}

/* A függőleges padding --card-badge-pad-y-ból jön, hogy a három jelvény ne csússzon el egymástól. */
.tc-compact-uses-badge,
.ttc-uses-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: var(--card-badge-pad-y) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text-inverse);
  background: var(--uses-clr);
}

.tc-compact-total,
.ttc-uses-total {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.8;
}

/* A jelvény saját vízszintes paddingjához igazítva, hogy a kettő egységként álljon. */
.tc-compact-status-text {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
  padding: 0 var(--space-2);
}

.tc-compact-status-text--expired { color: var(--clr-red-dark); }
.tc-compact-status-text--warn    { color: var(--clr-yellow-dark); }
.tc-compact-status-text--pending { color: var(--text-muted); }
.tc-compact-status-text--old     { color: var(--text-muted); }
.tc-compact-status-text--active  { color: var(--clr-green); }


/* Compact row - checkbox stop area.
   Stretched so the label below can be full row height. */
.tc-compact-checkbox {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
}

/* A címke a kapcsoló, tehát a találati felületet neki kell viselnie, nem ennek a csomagolónak. */
.tc-compact-checkbox .custom-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* A találati felület a kártya széléig ér: átlátszó pszeudoelem, nem padding (frontend.md). */
.tc-compact-checkbox .custom-checkbox::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-3));
  bottom: calc(-1 * var(--space-3));
  left: calc(-1 * var(--space-3));
  right: calc(-1 * var(--space-2));
}

/* Kijelölt bérlet; a jelölőnégyzet saját :checked állapotára, nem Livewire osztályra (docs/components.md). */
.tc-compact-row:has(.ticketCheckbox:checked) {
  background: color-mix(in srgb, var(--clr-green) 8%, var(--bg-card));
}

/* Compact row - status + action area */
.tc-compact-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Small action buttons inside compact row header */
.tc-compact-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem var(--space-2);
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast);
  white-space: nowrap;
}

.tc-compact-action-btn--extend:hover {
  border-color: var(--border-focus);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--clr-green) 6%, var(--bg-card));
}

.tc-compact-action-btn--clear {
  color: var(--clr-red-dark);
  border-color: color-mix(in srgb, var(--clr-red-dark) 25%, transparent);
}

.tc-compact-action-btn--clear:hover {
  background: color-mix(in srgb, var(--clr-red-dark) 8%, var(--bg-card));
  border-color: var(--clr-red-dark);
}


/* ── Compact expanded dropdown panel ────────────────── */

.tc-compact-expanded-content .ticket-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  animation: none;
}

.tc-cdp {
  display: flex;
  flex-direction: column;
    width: 100%;
}

/* Prominent uses display in expanded panel */
.tc-cdp-uses-hero {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--bg-card);
}

.tc-cdp-uses-big {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.tc-cdp-uses-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

/* Expanded panel info section */
.tc-cdp-info-section {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-4) var(--space-3);
  gap: var(--space-1);
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
}

.tc-cdp-info-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.2rem 0;
}

.tc-cdp-info-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.tc-cdp-info-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  min-width: 3.25rem;
  flex-shrink: 0;
}

.tc-cdp-info-val {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-left: auto;
  text-align: right;
}

.tc-cdp-info-val-right {
  margin-left: auto;
  text-align: right;
}

/* Expired-with-uses alert strip */
.tc-cdp-expired-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--clr-red-dark);
  background: color-mix(in srgb, var(--clr-red-dark) 7%, var(--bg-card));
  border-top: 1px solid color-mix(in srgb, var(--clr-red-dark) 15%, transparent);
  padding: var(--space-2) var(--space-4);
  line-height: 1.4;
}

.tc-cdp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
}

.tc-cdp-expiry-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.tc-cdp-expiry-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.025em;
}

.tc-cdp-expiry-val {
  font-size: var(--text-sm);
  font-weight: 700;
}

.tc-cdp-entry {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 0.1rem;
}

.tc-cdp-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.tc-cdp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: background var(--ease-fast), border-color var(--ease-fast);
}

.tc-cdp-btn:hover {
  background: var(--bg-muted);
  border-color: var(--border-focus);
}

.tc-cdp-btn--activate {
  background: var(--clr-green);
  border-color: var(--clr-green);
  color: var(--text-inverse);
}

.tc-cdp-btn--activate:hover {
  opacity: 0.88;
}

.tc-cdp-btn--extend {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-primary);
}

.tc-cdp-btn--clear {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--clr-red-dark);
}

.tc-cdp-btn--clear:hover {
  background: color-mix(in srgb, var(--clr-red-dark) 8%, var(--bg-card));
}

/* Expired-with-uses section in compact dropdown */
.tc-cdp-expired-section {
  border-top: 1px solid color-mix(in srgb, var(--clr-red-dark) 20%, transparent);
  background: color-mix(in srgb, var(--clr-red-dark) 5%, var(--bg-card));
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tc-cdp-expired-hint {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--clr-red-dark);
}

.tc-cdp-expired-actions {
  display: flex;
  gap: var(--space-2);
}

/* Expired-with-uses badge in compact row */
.tc-expired-uses-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 10px;
  font-weight: 700;
  color: var(--clr-red-dark);
  background: color-mix(in srgb, var(--clr-red-dark) 10%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--clr-red-dark) 30%, transparent);
  border-radius: var(--radius-full);
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}

/* Expired-with-uses action buttons in full card header */
.tc-expired-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: background var(--ease-fast), border-color var(--ease-fast);
}

.tc-expired-action-btn--extend:hover {
  border-color: var(--border-focus);
  color: var(--text-primary);
}

.tc-expired-action-btn--clear {
  color: var(--clr-red-dark);
  border-color: color-mix(in srgb, var(--clr-red-dark) 30%, transparent);
}

.tc-expired-action-btn--clear:hover {
  background: color-mix(in srgb, var(--clr-red-dark) 8%, var(--bg-card));
}

[x-cloak] { display: none !important; }

.tc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-3);
  background: var(--bg-card);
  transition: background-color var(--ease-base);
  width: 100%;
}

.tc-expiry {
  font-size: var(--text-sm);
  font-weight: 600;
}

.tc-coach-name {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.tc-uses {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
    gap: var(--space-1);
}

.tc-footer {
  display: flex;
  border-top: 1px solid var(--border-light);
  background: var(--bg-card);
  overflow: hidden;
  transition: background-color var(--ease-base);
  width: 100%;
}

/* Gomb ÉS link is visel: az „Adatlap" fül egy <a>, ezért kell a text-decoration. */
.tc-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  text-decoration: none;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-light);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast);
}

.tc-tab:last-child {
  border-right: none;
}

.tc-tab:hover {
  background: var(--bg-surface);
}

/* ── Activate Button ────────────────────────────────────── */
.ticket-activate-btn {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--clr-green);
  background: transparent;
  color: var(--clr-green);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--ease-fast), color var(--ease-fast);
}

.ticket-activate-btn:hover {
  background: var(--clr-green);
  color: var(--text-inverse);
}

/* ── Ticket Template Card (ttc) ─────────────────────────── */
.ttc {
  border-radius: var(--radius-xl);
  overflow: visible;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bg-card);
}

/* Tulajdonos-sor — a geometria a .ac-header-ből másolva, mert ugyanaz a fajta információ. */
.ttc-header {
  display: flex;
  align-items: center;
  gap: var(--card-row-gap);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
}

.ttc-avatar {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
}

.ttc-avatar-link {
  display: inline-flex;
  flex-shrink: 0;
}

.ttc-owner-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  margin: 0;
}

.ttc-owner-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text-secondary);
  transition: color var(--ease-fast);
}

.ttc-owner-link:hover { color: var(--clr-green); }

.ttc-owner-link-icon {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity var(--ease-fast);
}

.ttc-owner-link:hover .ttc-owner-link-icon { opacity: 1; }

.ttc-body {
  background: var(--bg-card);
  padding: var(--space-3);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  transition: background-color var(--ease-base);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Figyelmeztető vagy művelet-sor visszaveszi az alsó sarkokat; a kártya a kebab miatt overflow: visible. */
.ttc:has(.ttc-warning) .ttc-body,
.ttc:has(.ttc-actions) .ttc-body {
  border-radius: 0;
}

.ttc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--card-text-gap);
}

.ttc-name {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.ttc-details {
  display: flex;
  flex-direction: column;
  gap: var(--card-text-gap);
  font-size: var(--text-xs);
}

.ttc-detail-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
}

.ttc-detail-label {
  color: var(--text-muted);
}

.ttc-detail-value {
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ttc-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Az edző „csatlakoztasd a Stripe-ot" figyelmeztetése: sor a kártya paddingján BELÜL, nem teljes szélességű sáv. */
.ttc-warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-3) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--clr-yellow-light);
  border: 1px solid var(--clr-yellow-border);
  color: var(--clr-yellow-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--ease-fast);
}

.ttc-warning:hover {
  background: var(--clr-yellow-alpha-15);
}

/* Payment actions (athlete view). Continuation of the body — same side inset,
   no band, no second border — the way .ac-shared continues the athlete card. */
.ttc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: 0 var(--space-3) var(--space-3);
}

/* A gombok OSZTOZNAK a soron: egy teljes szélességű CTA, kettő félbe vágja a sort. */
.ttc-pay-btn {
  /* basis auto + min-width, nem basis 0: szűk kártyán a sor tördel, és mindkét gomb teljes szélességű lesz. */
  flex: 1 1 auto;
  min-width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap-sm);
  min-height: var(--control-height-sm);
  padding: 0 var(--control-padding-x-sm);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast);
}

.ttc-pay-btn--card {
  background: var(--clr-green);
  color: var(--text-inverse);
}

.ttc-pay-btn--card:hover {
  background: var(--clr-green-hover);
}

.ttc-pay-btn--alt {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-input);
}

.ttc-pay-btn--alt:hover {
  border-color: var(--clr-green);
  color: var(--clr-green-dark);
}

/* Early-bird marker on appointment cards — a clickable bird that explains why */
.appt-eb {
  position: relative;
  display: inline-flex;
  align-self: center;
  flex-shrink: 0;
}

.appt-eb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--clr-orange-dark);
  background: var(--clr-yellow-light);
  transition: background var(--ease-fast);
}

.appt-eb-btn--open { background: var(--clr-yellow); color: var(--text-inverse); }

[data-theme="dark"] .appt-eb-btn { background: color-mix(in srgb, var(--clr-yellow) 18%, transparent); }

.appt-eb-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  width: 15rem;
  max-width: 70vw;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--clr-orange-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.appt-eb-pop strong { color: var(--clr-orange-dark); }

/* Ticket-activation modal: which ticket will be activated */
.ta-next {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--clr-green-light);
  border-radius: var(--radius-md);
}

[data-theme="dark"] .ta-next {
  background: color-mix(in srgb, var(--clr-green) 8%, transparent);
}

.ta-next-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--clr-green-dim);
  color: var(--clr-green-medium);
}

.ta-next-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ta-next-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.025em; color: var(--text-muted); }
.ta-next-name { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); word-break: break-word; }

/* Early-bird points pill on athlete cards (coach view) */
.ac-eb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  /* Above .ac-name-link::after, which covers the whole row. */
  position: relative;
  z-index: 1;
  padding: 0.1rem var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--clr-orange-dark);
  background: var(--clr-yellow-light);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--ease-fast);
}
.ac-eb-badge:hover { background: var(--clr-yellow); }
[data-theme="dark"] .ac-eb-badge { background: color-mix(in srgb, var(--clr-yellow) 18%, transparent); }
[data-theme="dark"] .ac-eb-badge:hover { background: color-mix(in srgb, var(--clr-yellow) 28%, transparent); }

/* ── Early bird — compact home cards (.ebg-*) ───────────── */
.ebg-quests { display: flex; flex-direction: column; gap: var(--space-2); }

/* "Feltételek" modal steps */
.ebg-modal-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ebg-modal-steps li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45; }
.ebg-modal-emoji { flex-shrink: 0; font-size: var(--text-lg); line-height: 1.2; }
.ebg-modal-tip { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--text-muted); }

/* Compact card matching the home surface-row look (notif/appt style). Clickable. */
.ebg-quest {
  display: block;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ease-fast), background var(--ease-fast);
}
.ebg-quest:hover { background: var(--clr-yellow-light); }
[data-theme="dark"] .ebg-quest:hover { background: color-mix(in srgb, var(--clr-yellow) 8%, transparent); }

.ebg-quest--max {
  box-shadow: 0 0 0 1px var(--clr-yellow) inset;
}

.ebg-quest-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.ebg-quest-id { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.ebg-quest-athlete { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ebg-quest-coach { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
/* A kozos `.roster-deleted-badge` szint es format visz, a geometria a gazdae:
   itt egy flex sorban ul, tehat nem szabad osszenyomodnia. */
.ebg-quest-id .roster-deleted-badge { flex-shrink: 0; }

.ebg-quest-count { flex-shrink: 0; white-space: nowrap; }
.ebg-quest-points { font-size: var(--text-base); font-weight: 800; color: var(--clr-orange-dark); }
.ebg-quest-goal { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }

.ebg-track {
  margin-top: 0.35rem;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  overflow: hidden;
}

.ebg-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--clr-orange);
  transition: width var(--ease-base);
}

.ebg-remaining { display: block; margin-top: 0.3rem; font-size: var(--text-xs); color: var(--text-muted); }
.ebg-remaining--done { color: var(--clr-orange-dark); font-weight: 600; }

/* ── Early bird points (home box + activity page) ───────── */
.eb-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.eb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ease-fast), background var(--ease-fast);
}

.eb-row:hover { background: var(--clr-yellow-light); }
[data-theme="dark"] .eb-row:hover { background: color-mix(in srgb, var(--clr-yellow) 8%, transparent); }

.eb-row-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.eb-athlete { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.eb-coach { font-size: var(--text-xs); color: var(--text-muted); }

.eb-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex-shrink: 0;
  min-width: 6rem;
}

.eb-points { font-size: var(--text-sm); font-weight: 700; color: var(--clr-yellow-dark); white-space: nowrap; }
.eb-points-goal { color: var(--text-muted); font-weight: 600; }

.eb-bar {
  width: 6rem;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  overflow: hidden;
}

.eb-bar-fill { height: 100%; background: var(--clr-yellow); border-radius: var(--radius-full); }

/* Revolut athlete picker (inside the standard modal) */
.ttc-revolut-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ttc-revolut-athlete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  transition: border-color var(--ease-fast), color var(--ease-fast), background var(--ease-fast);
}

.ttc-revolut-athlete:hover {
  color: var(--clr-green-dark);
  background: var(--clr-green-light);
}

.ttc-revolut-athlete-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Appointment Card (appt) ────────────────────────────── */
.appt {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  overflow: visible;
  font-family: var(--font-sans);
}

/* Aznapi, mar lezajlott idopont: halvany, de hoverre teljesen olvashato (frontend.md). */
.appt--past { opacity: .7; }
.appt--past:hover,
.appt--past:focus-within { opacity: 1; }

/* Background tints — kept for potential future use, not applied by PHP */
.appt--booked     { background: color-mix(in srgb, var(--clr-green) 5%, var(--bg-card)); border-color: color-mix(in srgb, var(--clr-green) 20%, var(--border)); }
.appt--waitlisted { background: color-mix(in srgb, var(--clr-yellow) 6%, var(--bg-card)); border-color: color-mix(in srgb, var(--clr-yellow) 20%, var(--border)); }
.appt--cancelled  { background: color-mix(in srgb, var(--clr-red) 5%, var(--bg-card)); }

/* ── Card row layout ──────────────────────────────────── */
.appt-row {
  display: flex;
  align-items: center;
  gap: var(--card-row-gap);
  padding: var(--space-3);
  overflow: visible;
  border-radius: var(--radius-xl);
  position: relative;
}

/* Ghost link — makes the full card clickable; interactive elements sit above it */
.appt-ghost-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  cursor: pointer;
}

/* A ghost link maga láthatatlan, ezért a tap-visszajelzést a látható sor kapja (base.css).
   A .appt-center/.appt-badge a ghost link fölött ül, ezért tapre a globális :active
   őket zsugorítaná önmagukban — a sajátjuk letiltva, a sor kapja a zsugorodást. */
.appt-row:has(.appt-ghost-link:active, .appt-center:active, .appt-badge:active) {
  transform: scale(var(--tap-press-scale));
  filter: brightness(var(--tap-press-dim));
}

.appt-center:active,
.appt-badge:active {
  transform: none;
  filter: none;
}

/* Elements that must sit above the ghost link */
.appt-si,
.appt-icon-box,
.appt-center,
.appt-center--btn {
  position: relative;
  z-index: 1;
}

/* ── Left icon box (coach view) ───────────────────────── */
.appt-icon-box {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  font-size: 0.85rem;
  line-height: 1;
}

/* ===== Jelentkezés-jelző (felhasználói nézet) ===== a geometria a global.css közös jeléből jön (frontend.md). */
.appt-si {
  padding: 0;
  cursor: default;
}

button.appt-si {
  cursor: pointer;
}

/* On: filled, white glyph */
.appt-si--booked {
  border-color: var(--clr-green);
  background: var(--clr-green);
  color: var(--text-inverse);
}

.appt-si--waitlisted {
  border-color: var(--clr-yellow);
  background: var(--clr-yellow);
  color: var(--text-inverse);
}

/* Not "off" but "you can't act" — these are not checkbox states, so they keep
   their own glyph rather than pretending to be an unchecked box. */
.appt-si--cancelled {
  border-color: var(--clr-red);
  background: var(--clr-red);
  color: var(--text-inverse);
}

.appt-si--closed {
  border-color: var(--border);
  background: var(--bg-muted);
  color: var(--text-muted);
}

/* Ki: üres doboz. ITT deklarálva, a többi állapot mellett, nem a global.css közös szabályában (frontend.md). */
.appt-si--available {
  background: var(--bg-card);
  color: transparent;
}

button.appt-si:hover:not(.appt-si--booked):not(.appt-si--waitlisted) {
  border-color: var(--clr-green);
}

/* Same tap target as the ticket card's checkbox: out to the card's edge,
   transparent so the 1.25rem mark keeps its position. */
.appt-si::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-3));
  bottom: calc(-1 * var(--space-3));
  left: calc(-1 * var(--space-3));
  right: calc(-1 * var(--space-2));
}

/* ── Center content area ──────────────────────────────── */
.appt-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--card-text-gap);
  text-decoration: none;
}

.appt-center--btn {
  all: unset;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--card-text-gap);
  cursor: pointer;
  font-family: var(--font-sans);
  box-sizing: border-box;
  width: 100%;
}

/* Mindhárom középső sor azonos súlyú: egy napon belül a név ismétlődik, az idő és a létszám különböztet. */
.appt-name,
.appt-time,
.appt-capacity {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.appt-name,
.appt-time {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Right section ────────────────────────────────────── */
.appt-right {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  position: relative;
}

.appt-right-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: center;
  gap: 0.2rem;
}

.appt-capacity {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

/* ── Status badge ─────────────────────────────────────── */
/* Same --card-badge-pad-y as the uses pill — one badge family, one token. */
.appt-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--card-badge-pad-y) var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.appt-badge--green { background: var(--clr-green);  color: var(--text-inverse); }
.appt-badge--blue  { background: var(--clr-blue);   color: var(--text-inverse); }
.appt-badge--red   { background: var(--clr-red);    color: var(--text-inverse); }
.appt-badge--amber { background: var(--clr-yellow); color: var(--text-inverse); }
.appt-badge--gray  { background: var(--text-muted); color: var(--text-inverse); }

/* Maga a jelentkezés early bird: ÁLLAPOT-címke a státusz alatt, borostyán, nem az értesítés-narancs. */
.appt-eb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--card-badge-pad-y) var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.3;
  color: var(--clr-orange-dark);
  background: var(--clr-yellow-light);
}

/* Az edző kiemelt infója: figyelmeztető ikon, kattintásra felugró szöveg (mint az Early Bird villám). */
.appt-status-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.appt-highlight .appt-eb-pop { white-space: pre-line; overflow-wrap: anywhere; }

/* ── Share badge ──────────────────────────────────────── */
.appt-share-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.1875rem var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.4;
}

.appt-share-badge--owner {
  background: color-mix(in srgb, var(--clr-green) 15%, transparent);
  color: var(--clr-green);
}

.appt-share-badge--shared {
  background: color-mix(in srgb, var(--clr-yellow) 15%, transparent);
  color: var(--clr-yellow);
}

/* ── Kebab menu (coach) ───────────────────────────────── */
.appt-kebab {
  position: relative;
  align-self: center;
}

.appt-kebab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-xs);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  transition: background var(--ease-fast), color var(--ease-fast);
}

.appt-kebab-btn:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

.appt-kebab-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 10rem;
  background: var(--bg-menu);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  z-index: 200;
  overflow: hidden;
  padding: var(--space-1) 0;
}

.appt-kebab-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--ease-fast);
  font-family: var(--font-sans);
}

.appt-kebab-item:hover {
  background: var(--bg-surface);
}

.appt-kebab-item--danger {
  color: var(--clr-red-dark);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
}

.appt-kebab-item--danger:hover {
  background: var(--clr-red-light);
}

/* ── Shared Card Kebab (.card-km-*) ───────────────────── */
.card-km {
  position: relative;
  align-self: center;
}

.card-km-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-xs);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  transition: background var(--ease-fast), color var(--ease-fast);
  flex-shrink: 0;
  /* --alert already assumed this; making it unconditional so the tap target
     below anchors the same way on every card. */
  position: relative;
}

/* A találati felület a kártya jobb széléig ér; átlátszó pszeudoelem, FIX kifutással (frontend.md). */
.card-km-btn::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-3));
  right: calc(-1 * var(--space-3));
  bottom: calc(-1 * var(--space-3));
  left: calc(-1 * var(--space-2));
}

.card-km-btn:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

.card-km-btn--alert {
  position: relative;
}

.card-km-btn--alert::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--clr-orange);
  pointer-events: none;
}

.card-km-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 11rem;
  background: var(--bg-menu);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  z-index: 200;
  overflow: hidden;
  padding: var(--space-1) 0;
}

.card-km-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--ease-fast);
  font-family: var(--font-sans);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  white-space: nowrap;
}

.card-km-item:hover {
  background: var(--bg-surface);
}

.card-km-item--danger {
  color: var(--clr-red-dark);
}

.card-km-item--danger:hover {
  background: var(--clr-red-light);
}

/* A narancs kebab-pötty oka: ez a menüpont váltotta ki. */
.card-km-item--alert::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: var(--radius-full);
  background: var(--clr-orange);
  flex-shrink: 0;
}

/* ── Date separator in list ───────────────────────────── */
.appt-date-sep {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  padding: 0 var(--space-1);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.appt-date-sep:first-child {
  margin-top: 0;
}

/* ── Appointment group (cards under one date) ─────────── */
.appt-group {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);
}

/* ── Dark mode ────────────────────────────────────────── */
[data-theme="dark"] .appt--booked {
  background: color-mix(in srgb, var(--clr-green) 8%, var(--bg-card));
}

[data-theme="dark"] .appt--waitlisted {
  background: color-mix(in srgb, var(--clr-yellow) 9%, var(--bg-card));
}

[data-theme="dark"] .appt--cancelled {
  background: color-mix(in srgb, var(--clr-red) 8%, var(--bg-card));
}

/* ── Dark-mode header overrides ──────────────────────────── */
[data-theme="dark"] .ticket-card-header-container {
  background-color: var(--bg-muted);
}

[data-theme="dark"] .tc-header {
  background-color: var(--bg-muted);
}

[data-theme="dark"] .appointment-card-header-frame-parent {
  background-color: var(--bg-muted);
}


[data-theme="dark"] .ac-header {
  background-color: var(--bg-muted);
}

/* ===== Request / connected-user kártya (.rc) ===== két lap osztozik rajta, ezért nem komponens-@once-ban van. */
/* ── Request card — mirrors the athlete card (.ac) ─────── */
/* overflow: visible, hogy a kebab lenyílója kiférjen — mint a .ac / .gc / .appt (frontend.md). */
.rc {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-surface);
    background: var(--bg-card);
    overflow: visible;
    transition: background-color var(--ease-base);
}

/* ── Header ──────────────────────────────── */
/* Illeszkedik a .ac-header-hez; a keret választ el, sötét módban külön árnyalattal. */
.rc-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius-surface) var(--radius-surface) 0 0;
    overflow: hidden;
    transition: background-color var(--ease-base);
}

[data-theme="dark"] .rc-header {
    background-color: var(--bg-muted);
}

.rc-avatar-link { display: flex; flex-shrink: 0; }

.rc-avatar {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.rc-owner-name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-owner-link { text-decoration: none; }
.rc-owner-link:hover { color: var(--text-primary); }
.rc-owner-link-icon { color: var(--text-muted); vertical-align: baseline; }

.rc-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.18rem var(--space-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}
/* Színes alap + fehér szöveg, mint az .appt-badge; a „függőben" a figyelem-narancs. */
.rc-badge--pending { background: var(--clr-orange); color: var(--text-inverse); }
.rc-badge--denied  { background: var(--clr-red);    color: var(--text-inverse); }

/* ── Body ────────────────────────────────── */
.rc-body {
    display: flex;
    align-items: center;
    padding: var(--space-3);
    gap: var(--space-2);
}

.rc-athletes {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-width: 0;
}

.rc-athlete-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-muted);
    border-radius: var(--radius-surface);
    padding: 0.2rem var(--space-2);
}

.rc-athlete-age {
    font-weight: 400;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.rc-empty {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.rc-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    align-self: center;
}

/* Accept is the everyday action — keep it readable as the positive one
   even though it now lives in the menu with the destructive items. */
.rc-km-accept { color: var(--badge-own-text); }

/* Connected-user variants (/coach/users) */
.rc-badge--connected { background: var(--bg-muted); color: var(--text-secondary); }

/* ===== Edzői profil-kártya (.coach-profile-*) ===== két oldal használja, ezért a közös lapon a helye. */
.coach-profile-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.coach-profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-4);
}

.coach-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.coach-profile-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.coach-profile-name {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.coach-profile-contact {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.coach-profile-info {
    border-top: 1px solid var(--border-light);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.coach-profile-info-label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.coach-profile-info-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-line;
    margin: 0;
}

.coach-profile-revolut {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: flex-start;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    border: 1px solid var(--border-input);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--ease-fast), color var(--ease-fast);
}

.coach-profile-revolut:hover {
    border-color: var(--clr-green);
    color: var(--clr-green-dark);
}

/* ===== Nyilvános edzői oldal (.pc-*) ===== kirakat-kártyák: nincs kebab, nincs pop-out ikon. */

/* Marketing-lap, nem admin-lista: keskeny, középre igazított oszlop a --desktop-content-max (1200px) helyett. */
.pc-page {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);
}

.pc-card {
  display: flex;
  align-items: center;
  gap: var(--card-row-gap);
  padding: var(--space-3);
  background: var(--bg-card);
  border-radius: var(--radius-surface);
  text-decoration: none;
  color: inherit;
}

.pc-card-mark {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.pc-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--card-text-gap);
  flex: 1;
  min-width: 0;
}

.pc-card-name {
  font-weight: 700;
  color: var(--text-primary);
}

.pc-card-detail {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.pc-card-badge {
  flex-shrink: 0;
  padding: var(--card-badge-pad-y) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--clr-green-light);
  color: var(--clr-green-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.pc-card-badge--price {
  background: var(--clr-blue-light);
  color: var(--clr-blue-dark);
}

/* A csatlakozas a kartya also savja, nem kulon doboz. */
.coach-profile-action {
  padding: var(--space-3);
  border-top: 1px solid var(--border);
}

.pc-join {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap-md);
  min-height: var(--control-height-lg);
  padding: 0 var(--control-padding-x-lg);
  border-radius: var(--radius-control);
  background: var(--clr-green);
  color: var(--text-inverse);
  font-weight: 700;
  text-decoration: none;
}

.pc-join:hover { filter: brightness(1.08); }

/* Marketing-fejléc: a .coach-profile-* alap a profil-oldalé; itt, csak a .pc-page alatt,
   középre igazított kirakat-hero lesz belőle. */
.pc-page .coach-profile-card {
  text-align: center;
}

.pc-page .coach-profile-header {
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-4);
}

.pc-page .coach-profile-avatar {
  width: 88px;
  height: 88px;
}

.pc-page .coach-profile-meta {
  align-items: center;
}

.pc-page .coach-profile-name {
  font-size: var(--text-xl);
}

.pc-page .coach-profile-info {
  border-top: 0;
  padding-top: 0;
  align-items: center;
}

.pc-page .coach-profile-info-text {
  text-align: center;
  max-width: 46ch;
}

/* Kapcsolatfelvétel: másodlagos, tömör blokk — nem nyúlik a teljes oszlopszélességre,
   különben a marketing-lap űrlap-lapnak látszik (frontend.md). */
.pc-contact {
  align-self: center;
  width: 100%;
  max-width: 460px;
}

.pc-contact-lead {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}