/* ===== SLOTH — Global UI Enhancements (page titles, settings layout, forms, misc) ===== */

/* ── Page Title ─────────────────────────────────────────── */
.page-title-wrapper {
}

.page-title-wrapper h1,
.page-title-wrapper .page-title-main {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.page-title-wrapper .page-title-highlight {
  color: var(--clr-green);
}

.page-title-wrapper .page-title-sub {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* ── Form Validation Errors ─────────────────────────────── */
.form-errors {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-red);
  border-left: 3px solid var(--clr-red);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-error-text {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--clr-red);
}

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--clr-red-dark); }
.text-warning { color: var(--clr-yellow-dark); }

/* ── Shared Block System ────────────────────────────────── */
.block-stack {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);
}

.block-stack--section {
  gap: var(--layout-gap);
}

.block-stack--tight {
  gap: var(--space-2);
}

/* Mezők egy .form-section / .collapsible-body belsejében; a JS-csomagolónak meg kell ismételnie a gapet (frontend.md). */
.block-stack--fields {
  gap: var(--block-gap-section);
}

.block-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.block-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.block-row--align-end {
  align-items: flex-end;
}

.block-row--spread {
  justify-content: space-between;
}

.block-col {
  flex: 1 1 0;
  min-width: 0;
}

.block-col--sm {
  flex: 1 1 140px;
  min-width: 140px;
}

.block-col--30 {
  flex: 0 0 30%;
  width: 30%;
}

.block-col--60 {
  flex: 0 0 60%;
  width: 60%;
}

.block-reset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.hidden-form {
  display: none;
}

.block-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.block-callout svg {
  flex-shrink: 0;
}

.block-callout--info {
  background: var(--clr-blue-light);
  color: var(--clr-blue-dark);
}

.block-callout--warning {
  background: var(--clr-yellow-light);
  color: var(--clr-yellow-dark);
}

.block-callout--danger {
  background: var(--clr-red-light);
  color: var(--clr-red-dark);
}

.block-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ── Form Section ───────────────────────────────────────── */
.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-section);
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--block-pad-y) var(--block-pad-x);
  transition: background-color var(--ease-base);
}

.form-section-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* A szakasz-címek ikont viselnek; az ikon a cím színét örökli (fill: currentColor). */
.form-section-icon {
  vertical-align: -2px;
  margin-right: 0.35rem;
  opacity: 0.6;
}

/* ── Form Section: flat variant (fields carry their own border) ── */
.form-section--flat {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ── Form Card (wrapper without forced flex gap) ────────── */
/* Use on <form> or container div — preserves child spacing */
.form-card {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-section);
}

/* ── Form Hint ───────────────────────────────────────────── */
.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-left: var(--space-1);
  line-height: 1.4;
}

/* ── Form Error Block ────────────────────────────────────── */
.form-errors {
  background: var(--clr-red-light);
  border: 1px solid color-mix(in srgb, var(--clr-red) 25%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.form-errors ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
}

.form-errors li {
  font-size: var(--text-sm);
  color: var(--clr-red-dark);
  line-height: 1.6;
}

[data-theme="dark"] .form-errors {
  background: color-mix(in srgb, var(--clr-red) 10%, transparent);
  border-color: color-mix(in srgb, var(--clr-red) 20%, transparent);
}

[data-theme="dark"] .form-errors li {
  color: var(--clr-red-dark);
}

/* ── Card list spacing ───────────────────────────────────── */
.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);
}

.page-layout {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);
}

/* Az almenü saját alsó térközt visel, ezért első blokként kioltjuk a duplázó layout gapet. */
.page-layout > :first-child:has(.submenu-container) {
  margin-bottom: calc(-1 * var(--layout-gap));
}

/* ── Linked elements (tighter gap for label+input, input+hint, etc.) */
.block-linked {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-linked);
}

/* Shared shell styling for block cards */
.page-block,
.form-section,
.form-card,
.app-card,
.settings-card,
.invoice-card,
.hist-card,
.apt-card,
.settings-stripe-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--block-pad-y) var(--block-pad-x);
  transition: background-color var(--ease-base);
}

/* ── Settings Layout ────────────────────────────────────── */
.settings-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border-light);
}

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

.settings-field-label {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
}

.settings-field-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ── Notification badge ──────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
}

.badge-green   { background: var(--clr-green-light);  color: var(--badge-own-text); }
.badge-red     { background: var(--clr-red-light);     color: var(--clr-red-dark); }
.badge-yellow  { background: var(--clr-yellow-light);  color: var(--clr-yellow-dark); }
.badge-blue    { background: var(--clr-blue-light);    color: var(--clr-blue-dark); }
.badge-gray    { background: var(--bg-muted);          color: var(--text-secondary); }

[data-theme="dark"] .badge-yellow { background: color-mix(in srgb, var(--clr-yellow) 15%, transparent); color: var(--clr-yellow-dark); }
[data-theme="dark"] .badge-blue   { background: color-mix(in srgb, var(--clr-blue)   15%, transparent); color: var(--clr-blue-dark); }
[data-theme="dark"] .badge-red    { background: color-mix(in srgb, var(--clr-red)    15%, transparent); color: var(--clr-red-dark); }

/* ── Empty State ────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  gap: var(--space-3);
}

.empty-state-icon {
  font-size: var(--text-3xl);
  opacity: 0.4;
}

.empty-state-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
}

.empty-state-text {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 24rem;
}

.empty-state-icon-svg {
  color: var(--text-muted);
  margin: 0 auto;
  display: block;
}

/* ── History / Audit Log ────────────────────────────────── */
.history-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

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

/* ── Link styles ────────────────────────────────────────── */
a.text-link {
  color: var(--clr-green);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--ease-fast);
  word-break: break-word;
  overflow-wrap: anywhere;
}

a.text-link:hover {
  color: var(--clr-green-hover);
  text-decoration: underline;
}

/* ── Divider with text ──────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin: var(--space-2) 0;
}

.auth-divider-line {
  flex: 1;
  height: 1px;
  background-color: var(--border);
}

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

/* ── Stats Card ─────────────────────────────────────────── */
.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: background-color var(--ease-base);
}

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

.stat-card-value {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* ── Notifications page ──────────────────────────────────── */
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  transition: background-color var(--ease-base);
}

.notification-item.unread {
  border-left: 3px solid var(--clr-green);
  background: var(--clr-green-light);
}

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

/* ── Invoice row ────────────────────────────────────────── */
.invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  font-size: var(--text-sm);
  transition: background-color var(--ease-base);
}

/* ── Responsive Grid ────────────────────────────────────── */
@media (min-width: 640px) {
  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}


/* ── Scroll hint fade ───────────────────────────────────── */
.scroll-fade-right::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2rem;
  background: var(--bg-page);
  pointer-events: none;
}

/* ── Back Button ────────────────────────────────────────── */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: var(--space-1) 0;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color var(--ease-fast);
}
.back-btn:hover { color: var(--text-primary); }

/* ── Collapsible Section ─────────────────────────────────── */
.collapsible-section {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  transition: background-color var(--ease-base);
  overflow: hidden;
}

.collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  user-select: none;
  /* Saját felső rádiusz: nyitáskor overflow: visible lesz, és a zöld sáv leszögletesítené a kártya tetejét. */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  transition: background var(--ease-fast);
}

.collapsible-title {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
}

.collapsible-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.collapsible-section[open] {
  overflow: visible;
}

/* A fejléc zöldre vált nyitáskor; `>`-vel scope-olva, hogy egy beágyazott ne írja át a szülőjét. */
.collapsible-section[open] > .collapsible-summary {
  background: var(--clr-green);
}

.collapsible-section[open] > .collapsible-summary .collapsible-title {
  color: var(--text-inverse);
}

/* On the green header the 0.6 decorative opacity reads as washed out. */
.collapsible-section[open] > .collapsible-summary .form-section-icon {
  opacity: 0.9;
}

.collapsible-section[open] > .collapsible-summary .collapsible-chevron {
  transform: rotate(360deg);
  color: var(--overlay-white-bright);
}

.collapsible-body {
  padding: var(--block-pad-y) var(--block-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-section);
  /* --border (not --border-light) so the summary/body separator stays visible
     in dark mode, where --border-light blends into the card surface. */
  border-top: 1px solid var(--border);
}

/* ── Pending approval banner ───────────────────────────────── */
.pending-approval-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--clr-yellow) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--clr-yellow) 40%, transparent);
  border-radius: var(--radius-xl);
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.5;
}

.pending-approval-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--clr-yellow);
}

/* ── Shared App Card ────────────────────────────────────── */
.app-card {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-section);
  margin-bottom: 0;
}

.app-card-danger {
  border-color: var(--clr-red-dim);
  gap: var(--space-2);
}

.app-card-danger > * + * {
  margin-top: 0;
}

.page-block {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-section);
}

/* Blokk-cím, tehát úgy olvasódik, mint minden más: --text-primary, nem nagybetűs (frontend.md). */
.settings-card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.settings-form-flow {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-section);
}

/* Persistent PWA install action on General Settings. It stays available even
   after the compact top banner has been dismissed. */
.app-install-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  overflow: hidden;
  position: relative;
  background: var(--clr-green-light);
  border-color: var(--clr-green-alpha-20);
}

.app-install-card::after {
  content: '';
  position: absolute;
  width: 9rem;
  height: 9rem;
  right: -4rem;
  bottom: -6rem;
  border-radius: var(--radius-full);
  background: var(--clr-green-alpha-10);
  pointer-events: none;
}

.app-install-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  padding: var(--space-1);
  border-radius: var(--radius-surface);
  background: var(--bg-card);
  border: 1px solid var(--clr-green-alpha-20);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 1;
}

.app-install-card__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: calc(var(--radius-surface) - var(--space-1));
}

.app-install-card__content,
.app-install-card__action {
  position: relative;
  z-index: 1;
}

.app-install-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.app-install-card__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--clr-green-medium);
  font-size: var(--text-xs);
  font-weight: 700;
}

.app-install-card__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-lg);
  line-height: 1.25;
}

.app-install-card__description {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.app-install-card__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 12rem;
}

.app-install-card__button {
  width: 100%;
}

.app-install-card__button.is-installed {
  background: var(--clr-green-dark) !important;
  opacity: 1;
}

.app-install-card__status {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
  text-align: center;
}

@media (max-width: 700px) {
  .app-install-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .app-install-card__action {
    grid-column: 1 / -1;
    align-items: stretch;
    width: 100%;
  }
}

/* Flex so the JS-inserted floating-save sentinel (inline-block) doesn't
   generate a line box of empty height; row collapses when the button floats. */
.settings-save-row {
  display: flex;
}

/* When the save button is floating (position:fixed, out of flow) the row is
   empty — cancel the parent flex gap so it leaves no dead space. */
.settings-form-flow > .settings-save-row:has(.floating-save.is-floating) {
  margin-top: calc(-1 * var(--block-gap-section));
}

.settings-divider {
  border-top: 1px solid var(--border);
}

.setting-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-sans);
  margin-top: 0;
  padding-left: 0;
}

/* Egy tipp mutathat valahova anélkül, hogy kékbe váltana: csak hoveren kap színt. */
.setting-hint a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.setting-hint a:hover {
  color: var(--clr-green);
}

.settings-field-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.settings-field-stack > * {
  margin-bottom: 0;
}

.settings-stripe-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--block-gap-section);
  background: var(--bg-page);
  flex-wrap: wrap;
}

.settings-stripe-card > div {
  display: flex;
  align-items: center;
}

.settings-stripe-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.settings-stripe-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.settings-stripe-dot--green { background: var(--clr-green); }
.settings-stripe-dot--grey { background: var(--clr-inactive); }

.settings-stripe-label {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
}

.settings-stripe-label--connected { color: var(--clr-green); }
.settings-stripe-label--disconnected { color: var(--text-muted); }

.settings-stripe-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0.1rem 0 0;
}

.settings-fieldset:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.settings-guide-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--block-gap-section) var(--block-pad-x);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--border);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--ease-fast), border-color var(--ease-fast);
}

.settings-guide-banner:hover { background: var(--bg-muted); }

.settings-guide-banner-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.settings-guide-banner--stripe {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-secondary);
}

.invoice-shell {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);
}

/* A számlák lap saját szűrősora megszűnt: a szűrők a eszköztár szűrő-modaljában vannak. */

.invoice-card {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-section);
}

.invoice-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.invoice-card-number {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-primary);
}

.invoice-status {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.invoice-status--created {
  background: var(--clr-green-light);
  color: var(--badge-own-text);
}

.invoice-status--error {
  background: var(--clr-red-light);
  color: var(--clr-red-dark);
}

[data-theme="dark"] .invoice-status--created {
  background: color-mix(in srgb, var(--clr-green) 15%, transparent);
  color: var(--badge-own-text);
}

[data-theme="dark"] .invoice-status--error {
  background: color-mix(in srgb, var(--clr-red) 15%, transparent);
  color: var(--clr-red-dark);
}

.invoice-card-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light);
  gap: var(--space-2);
}

.invoice-card-row span:last-child {
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: right;
  max-width: 70%;
}

.invoice-card-row:last-of-type {
  border-bottom: none;
}

.invoice-label {
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 8px;
  white-space: nowrap;
}

.invoice-error { color: var(--clr-red-dark); }

.invoice-link-row {
}

.invoice-pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) var(--space-3);
  background: var(--clr-green);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-sans);
  border: none;
  cursor: pointer;
  transition: opacity var(--ease-fast);
}

.invoice-pdf-link:hover { opacity: 0.9; }

.invoice-empty-state {
  text-align: center;
  padding: 2.5rem var(--space-4);
}

.invoice-empty-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
}

.invoice-empty-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 1.25rem;
  line-height: 1.5;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.invoice-empty-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.invoice-empty-btn {
  display: inline-flex;
  min-height: var(--control-height-md);
  align-items: center;
  justify-content: center;
  gap: var(--control-gap-sm);
  padding: 0 var(--control-padding-x-md);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--ease-fast), background var(--ease-fast);
  white-space: nowrap;
}

.invoice-empty-btn--primary {
  background: var(--clr-green);
  color: var(--text-inverse);
}

.invoice-empty-btn--primary:hover { opacity: 0.88; }

.invoice-empty-btn--ghost {
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.invoice-empty-btn--ghost:hover { background: var(--bg-surface); }

/* History blocks */
.hist-card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-linked);
}

.hist-card[data-type="appointment"] { --hist-accent: var(--clr-blue); --hist-badge-bg: var(--clr-blue-alpha-10); --hist-badge-border: var(--clr-blue-alpha-20); }
.hist-card[data-type="athlete"] { --hist-accent: var(--clr-violet); --hist-badge-bg: var(--clr-violet-alpha-10); --hist-badge-border: var(--clr-violet-alpha-20); }
.hist-card[data-type="ticket"] { --hist-accent: var(--clr-green); --hist-badge-bg: var(--clr-green-alpha-10); --hist-badge-border: var(--clr-green-alpha-20); }
.hist-card[data-type="tickettemplate"] { --hist-accent: var(--clr-pink); --hist-badge-bg: var(--clr-pink-alpha-10); --hist-badge-border: var(--clr-pink-alpha-20); }
.hist-card[data-type="group"] { --hist-accent: var(--clr-teal); --hist-badge-bg: var(--clr-teal-alpha-10); --hist-badge-border: var(--clr-teal-alpha-20); }
.hist-card[data-type="user"] { --hist-accent: var(--clr-user-history); --hist-badge-bg: var(--clr-user-history-alpha-10); --hist-badge-border: var(--clr-user-history-alpha-20); }
/* Az Early Bird saját kategória, és sárga, mert mindenhol az (App\Helpers\HistoryCategory). */
.hist-card[data-type="earlybird"] { --hist-accent: var(--clr-yellow); --hist-badge-bg: var(--clr-yellow-alpha-10); --hist-badge-border: var(--clr-yellow-alpha-20); }
[data-theme="dark"] .hist-card[data-type="athlete"] { --hist-badge-bg: var(--clr-violet-alpha-18); --hist-badge-border: var(--clr-violet-alpha-32); }
[data-theme="dark"] .hist-card[data-type="group"]   { --hist-badge-bg: var(--clr-teal-alpha-18);  --hist-badge-border: var(--clr-teal-alpha-32); }
[data-theme="dark"] .hist-card[data-type="user"]    { --hist-badge-bg: var(--clr-user-history-alpha-18);  --hist-badge-border: var(--clr-pink-alpha-32); }

.hist-card--accent {
  border-left: 3px solid var(--hist-accent, var(--clr-blue));
}

.hist-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.hist-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--hist-badge-bg, var(--clr-green-alpha-10));
  color: var(--hist-accent, var(--clr-green));
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid var(--hist-badge-border, var(--clr-green-alpha-20));
}

.hist-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.hist-action {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.5;
}

.hist-data {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hist-data-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hist-change-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.hist-change-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
}

.hist-change-table th,
.hist-change-table td {
  padding: 10px 12px;
  font-size: var(--text-xs);
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-light);
}

.hist-change-table th {
  color: var(--text-primary);
  font-weight: 700;
  background: var(--badge-shared-bg);
}

.hist-change-table td {
  color: var(--text-primary);
  font-weight: 500;
}

.hist-change-table tbody tr:last-child td {
  border-bottom: none;
}

.hist-data-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
}

.hist-data-section-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-primary);
}

.hist-data-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  font-size: var(--text-xs);
  line-height: 1.5;
}

.hist-data-key {
  color: var(--text-muted);
  font-weight: 600;
}

.hist-data-key::after {
  content: ":";
  margin-left: 2px;
}

.hist-data-val {
  color: var(--text-primary);
  font-weight: 500;
}

.hist-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hist-list-item {
  color: var(--text-primary);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.hist-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  flex-wrap: nowrap;
}

.hist-card-footer-main {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}

.hist-model-link,
.hist-model-name,
.hist-user {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  min-width: 0;
}

.hist-model-link {
  color: var(--text-primary);
  text-decoration: none;
}

.hist-model-link:hover {
  text-decoration: underline;
}

.hist-model-name,
.hist-user {
  color: var(--text-muted);
}

/* Egy szabály, több szelektor — nem másolat: a /history és az időpont-chip jelvénye ugyanaz az állítás. */
.hist-deleted-badge,
.roster-deleted-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--clr-red-light);
  color: var(--clr-red-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.hist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--text-muted);
}

/* Az előzmény-lap saját dátumsora megszűnt: a tartomány a eszköztár szűrő-modaljában van. */

/* Appointment template blocks */
.apt-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.apt-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.apt-card-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.apt-card-actions {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}

.apt-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.apt-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

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

.apt-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Admin notification blocks */
.adm-input-inline {
  flex: none;
  width: auto;
}

.adm-notif-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.adm-notif-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.adm-notif-user {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.adm-notif-json {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Appointment forms / warnings */
.form-inline-grid {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.form-inline-grid > .form-inline-grid-col {
  flex: 1 1 0;
  min-width: 0;
}

.form-inline-grid--compact {
  align-items: flex-end;
}

.form-warning {
  display: none;
}

.deadline-preset-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Outlined on the card background, not a filled grey chip — a filled chip read
   as already-selected, which is exactly the state that now means something. */
.deadline-preset-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.4;
  transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast);
}

.deadline-preset-btn:hover {
  border-color: var(--clr-green);
  color: var(--text-primary);
}

/* The preset matching the field's current value */
.deadline-preset-btn--active,
.deadline-preset-btn--active:hover {
  background: var(--clr-green);
  border-color: var(--clr-green);
  color: var(--text-inverse);
}

.template-intro-card,
.template-picker-card,
.template-empty-state,
.template-save-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.template-intro-card {
  gap: var(--space-4);
  padding-top: var(--space-1);
}

.template-intro-text,
.template-empty-text,
.template-save-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.55;
  padding-bottom: var(--space-2);
}

.template-picker-head,
.template-empty-state,
.template-save-card {
  justify-content: space-between;
}

.template-picker-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.template-empty-title,
.template-save-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
}

.template-inline-link,
.template-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
}

/* Gomb, nem szöveges link: cím mellett áll és elvisz valahova, tehát kell neki él. --clr-green, nem a sötétebb. */
.template-inline-link {
  margin-left: auto;
  gap: var(--space-1);
  min-height: var(--control-height-sm);
  padding: 0 var(--control-padding-x-sm);
  border: 1.5px solid var(--clr-green);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--clr-green);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: background var(--ease-fast);
}

.template-inline-link:hover {
  background: var(--clr-green-dim);
}

.template-cta-btn {
  align-self: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--clr-green);
  color: var(--text-inverse);
  box-shadow: var(--shadow-card);
}

.template-cta-btn:hover {
  background: var(--clr-green-dark);
}

.recurrence-fields {
  display: none;
}

.recurrence-fields.is-visible {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-section);
}

.recurrence-panel.is-visible {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-linked);
}

.recurrence-frequency-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  flex-wrap: wrap;
}

.recurrence-frequency-field {
  width: 30%;
  min-width: 0;
}

.recurrence-panel {
  display: none;
}

.repeat-days {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

.repeat-day-box {
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.repeat-day-box input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.repeat-day-label {
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-full);
  background-color: var(--bg-card);
  border: 1.5px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
}

.repeat-day-box input[type="checkbox"]:checked + .repeat-day-label {
  background-color: var(--clr-green);
  border-color: var(--clr-green);
  color: var(--text-inverse);
}

.repeat-end-container {
  width: 100%;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* Mindkét sor `display: flex` címke; a térköz a szülőé, soha nem a soron ülő margó. */
.repeat-end-options {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-section);
  font-size: var(--text-xs);
}

.repeat-end-custom-radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.repeat-end-custom-radio input[type="radio"] {
  display: none;
}

.repeat-end-field--date {
  width: 60%;
  min-width: 0;
}

.repeat-end-field--count {
  width: 30%;
  min-width: 0;
}

.radio-icon-unchecked {
  display: block;
  color: var(--text-muted);
}

.radio-icon-checked {
  display: none;
  color: var(--clr-green);
}

.repeat-end-custom-radio input[type="radio"]:checked + .radio-custom .radio-icon-unchecked {
  display: none;
}

.repeat-end-custom-radio input[type="radio"]:checked + .radio-custom .radio-icon-checked {
  display: block;
}

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

.mod-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.mod-search-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--text-secondary);
  pointer-events: none;
  flex-shrink: 0;
}

.mod-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 14px + var(--space-2));
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}

.mod-search-input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.mod-search-clear {
  position: absolute;
  right: var(--space-3);
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.wl-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.wl-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  user-select: none;
}

.wl-position {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

.wl-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

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

.wl-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

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

.wl-remove-btn:hover {
  color: var(--clr-red);
  background: var(--clr-red-light);
}

.wl-action-btn {
  display: inline-flex;
  min-height: var(--control-height-md);
  align-items: center;
  justify-content: center;
  gap: var(--control-gap-md);
  padding: 0 var(--control-padding-x-md);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: opacity var(--ease-fast), background var(--ease-fast);
  white-space: nowrap;
}

.wl-action-btn--save {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-primary);
}

.wl-action-btn--save:hover {
  background: var(--bg-muted);
}

.wl-action-btn--promote {
  background: var(--clr-green);
  color: var(--text-inverse);
}

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

.wl-empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.wl-add-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Minden sor magától posztol, ezért saját <form>-ban ül — és a form flex konténerré tétele adja vissza a méretezést. */
.wl-add-grid > form {
  display: flex;
}

/* Ugyanaz a sor, mint a .mod-athlete-row; a `width: 100%` NEM redundáns: itt a gomb egy flex SORBAN álló <form>-ban ül. */
.wl-add-row {
  display: flex;
  align-items: center;
  gap: var(--card-row-gap);
  width: 100%;
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--ease-fast), background var(--ease-fast);
}

.wl-add-row:hover {
  border-color: var(--border-focus);
  background: color-mix(in srgb, var(--clr-green) 6%, var(--bg-card));
}

.wl-add-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--clr-green);
  flex-shrink: 0;
  transition: border-color var(--ease-fast), background var(--ease-fast);
}

.wl-add-row:hover .wl-add-icon {
  border-color: var(--border-focus);
  background: var(--clr-green);
  color: var(--text-inverse);
}

.wl-add-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* Settings calendar blocks */
.cal-section {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-linked);
}

.cal-intro {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cal-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0;
}

.cal-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.cal-add-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-surface);
  transition: border-color var(--ease-fast), background var(--ease-fast);
}

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

.cal-url-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.cal-url-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--bg-surface);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-url-input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.cal-copy-btn {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--ease-fast), color var(--ease-fast);
}

.cal-copy-btn:hover {
  border-color: var(--border-focus);
  color: var(--text-primary);
}

.cal-danger-section {
  border: 1.5px solid var(--clr-yellow-light);
  background: var(--clr-yellow-pale);
}

.cal-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cal-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.cal-step-num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--clr-green);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.cal-step-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.125rem;
}

.cal-step-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Checkout / payment result */
.checkout-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checkout-card-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
  gap: var(--space-3);
}

.checkout-card-section:last-child {
  border-bottom: none;
}

.checkout-label {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0;
}

.checkout-value {
  font-size: var(--text-base);
  margin: 0;
  text-align: right;
}

.checkout-field-error {
  font-size: var(--text-sm);
  color: var(--clr-red);
  margin: var(--space-1) 0 0 var(--space-1);
}

.checkout-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.payment-result-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
}

.payment-result-card--success {
  border-top: 3px solid var(--clr-green);
}

.payment-result-card--cancel {
  border-top: 3px solid var(--clr-red);
}

.payment-result-icon {
  font-size: var(--text-3xl);
  color: var(--clr-green);
  line-height: 1;
}

.payment-result-icon--cancel {
  color: var(--clr-red);
}

.payment-result-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.payment-result-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.payment-result-countdown {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

.payment-result-btn {
  display: inline-flex;
  min-height: var(--control-height-lg);
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-6);
  background: var(--clr-green);
  color: var(--text-inverse);
  border-radius: var(--radius-control);
  font-weight: 700;
  font-size: var(--text-base);
  text-decoration: none;
  transition: background var(--ease-fast);
  white-space: nowrap;
}

.payment-result-btn:hover {
  background: var(--clr-green-hover);
}

.payment-result-btn--secondary {
  background: var(--bg-muted);
  color: var(--text-primary);
}

.payment-result-btn--secondary:hover {
  background: var(--border);
}

/* Onboarding / coach selection */
.ob-hint {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}

.ob-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0;
}

.ob-skip-link {
  align-self: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
}

.ob-skip-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.ob-share-athlete {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.ob-share-athlete strong {
  color: var(--text-primary);
}

.ob-coach-pending-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ob-coach-pending-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.ob-coach-pending-name {
  flex: 1;
}

.ob-coach-pending-cancel-form {
  margin: 0;
}

.ob-coach-pending-cancel {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-icon-button-sm);
  height: var(--control-icon-button-sm);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  transition: background var(--ease-fast), color var(--ease-fast);
}

.ob-coach-pending-cancel:hover {
  background: var(--clr-red-light);
  color: var(--clr-red);
}

.ob-coach-pending-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--clr-orange);
  flex-shrink: 0;
}

.ob-section-label--banned {
  color: var(--clr-red-dark);
}

.ob-coach-pending-item--banned {
  border-color: var(--clr-red-light);
  color: var(--text-muted);
}

[data-theme="dark"] .ob-coach-pending-item--banned {
  border-color: color-mix(in srgb, var(--clr-red) 20%, transparent);
}

.ob-banned-icon {
  color: var(--clr-red-dark);
  flex-shrink: 0;
}

.ob-banned-hint {
  font-size: var(--text-xs);
  color: var(--clr-red-dark);
  font-weight: 500;
  margin-left: auto;
}

/* Sharing blocks */
.shared-users {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shared-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background-color: var(--bg-surface);
}

.shared-user--pending {
  background-color: var(--clr-orange-light);
  border-color: var(--clr-orange-border);
}

.shared-user__name {
  white-space: nowrap;
  font-size: 14px;
}

.shared-user__pending-label {
  font-size: 12px;
  color: var(--clr-orange-dark);
  white-space: nowrap;
}

.shared-user__remove-form,
.shared-user__inline-form {
  margin: 0;
}

.shared-user__remove,
.shared-user__delete-btn {
  all: unset;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--clr-red-dark);
  padding: 0 2px;
}

@media (max-width: 640px) {
  .hist-change-table {
    min-width: 0;
    table-layout: fixed;
  }

  .hist-change-table th,
  .hist-change-table td {
    padding: 8px 9px;
    font-size: 11px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .block-col--30,
  .block-col--60 {
    flex-basis: 100%;
    width: 100%;
  }

  .recurrence-frequency-field,
  .repeat-end-field--date,
  .repeat-end-field--count {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .template-empty-state,
  .template-save-card {
    flex-direction: row;
    align-items: center;
  }
}

.danger-zone-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clr-red-dark);
  margin: 0;
}

.danger-zone-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

/* ── Shared Pagination ───────────────────────────────────── */
.x-pag {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: var(--layout-gap);
}

/* In flex-gap containers the gap already provides spacing — cancel the margin */
.card-list > .x-pag,
.page-layout > .x-pag,
.invoice-shell > .x-pag,
.block-stack > .x-pag,
.settings-form-flow > .x-pag,
.notif-section > .x-pag {
  margin-top: 0;
}
.x-pag::-webkit-scrollbar { display: none; }

.x-pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
}
.x-pag-btn:hover:not(.x-pag-btn--active):not(.x-pag-btn--disabled):not(.x-pag-btn--ellipsis) {
  background: var(--bg-muted);
  color: var(--text-primary);
}
.x-pag-btn--active {
  background: var(--clr-green);
  border-color: var(--clr-green);
  color: var(--text-inverse);
  font-weight: 600;
}
.x-pag-btn--ellipsis,
.x-pag-btn--disabled {
  border-color: transparent;
  background: transparent;
  cursor: default;
  color: var(--text-muted);
  pointer-events: none;
}

/* A ‹ › nyilak megtartják a dobozukat letiltva is, különben az első és az utolsó oldal félrecsúszna. */
.x-pag-btn--nav.x-pag-btn--disabled {
  border-color: var(--border);
  background: var(--bg-card);
}

/* ===== A pipa-jel, app-szerte ===== egy kör minden „be van kapcsolva?" vezérlőhöz, EGY szabályban (frontend.md). */
.custom-checkbox .checkbox-icon,
.appt-si,
.mod-athlete-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  transition: border-color var(--ease-fast), background var(--ease-fast), color var(--ease-fast);
}

/* Fentebb CSAK GEOMETRIA: a `background` és a `color` ÁLLAPOT, és nem lakhat a közös szabályban (frontend.md). */
.custom-checkbox .checkbox-icon {
  background: var(--bg-card);
  /* The glyph inherits this, so it is invisible until the control is on,
     rather than being toggled by swapping two elements. */
  color: transparent;
}

.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  background-color: transparent;
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.custom-checkbox:hover .checkbox-icon {
  border-color: var(--clr-green);
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-icon {
  border-color: var(--clr-green);
  background: var(--clr-green);
  color: var(--text-inverse);
}

.custom-checkbox input[type="checkbox"]:disabled + .checkbox-icon {
  opacity: 0.5;
}

.custom-checkbox:has(input[type="checkbox"]:disabled) {
  cursor: not-allowed;
}

/* ── Generic Filter Trigger ──────────────────────────────── */
/* ===== Lista-eszköztár: kereső + szűrő egy sávban ===== a sáv keres, a végén lévő ikon nyitja a szűrőket (frontend.md). */
/* A sáv MINDEN listaoldalon ugyanaz a vezérlő, ezért a magassága tokenből jön, nem a tartalomból (frontend.md). */
.search-box {
  display: flex;
  align-items: center;
  min-height: var(--control-height-lg);
  background: var(--bg-card);
  border: 1.5px solid var(--border-input);
  border-radius: var(--radius-surface);
  padding: 0 var(--space-3);
  gap: var(--space-2);
  transition: border-color var(--ease-fast);
}

.search-box:focus-within {
  border-color: var(--clr-green);
  box-shadow: none;
}

.search-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* A kurzor a mező SORDOBOZÁVAL azonos magas; --text-sm-nél az alapértelmezett line-height pár pixelt adott. */
.search-input {
  flex: 1;
  align-self: stretch;
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-primary);
  font-family: var(--font-sans);
  min-width: 0;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: var(--control-icon-button-sm);
  height: var(--control-icon-button-sm);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background var(--ease-fast), color var(--ease-fast);
}

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

/* The divider is what makes the filter icon read as its own target rather than
   part of the field — without it people aim at the input and nothing opens. */
/* Behúzva a sáv széleitől: a doboznak már nincs saját függőleges paddingja. */
.lt-divider {
  width: 1px;
  align-self: stretch;
  margin: var(--space-2) 0;
  background: var(--border);
  flex-shrink: 0;
}

.lt-filter-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-icon-button-sm);
  height: var(--control-icon-button-sm);
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--ease-fast), color var(--ease-fast);
}

.lt-filter-btn:hover,
.lt-filter-btn:focus-visible {
  background: var(--bg-muted);
  color: var(--text-primary);
  outline: none;
}

/* A filter being set is STATE, not an alert — so green, not the orange the
   notification indicators own (see rules/frontend.md). */
.lt-filter-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--clr-green);
  border: 1.5px solid var(--bg-card);
}

/* Applied filters, one removable chip each. They used to be text inside the
   bar; the bar's text is the search term now. */
.lt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: calc(var(--space-1) / 2) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-decoration: none;
  transition: border-color var(--ease-fast), color var(--ease-fast);
}

/* Csak a LEVEHETŐ chip megy pirosba, és a levehető azt jelenti: link (frontend.md). */
a.lt-chip:hover {
  border-color: var(--clr-red);
  color: var(--clr-red-dark);
}

.lt-chip--static {
  cursor: default;
  color: var(--text-muted);
}

.lt-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lt-chip-x {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ===== Emoji picker ===== a szűrő-trigger geometriájára építve: a TARTALOM mondja el az állapotot. */
.emoji-picker {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-linked);
}

.emoji-trigger {
  width: 100%;
  min-height: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-2) - (var(--space-1) / 4)) var(--space-3);
  border: 1.5px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color var(--ease-fast), background-color var(--ease-fast), color var(--ease-fast);
}

.emoji-trigger:hover,
.emoji-trigger:focus-visible {
  border-color: var(--clr-green);
  outline: none;
}

/* Set: green like every other "active" control in the app. */
.emoji-trigger--set {
  border-color: var(--clr-green);
  background: var(--clr-green-dim);
  color: var(--text-primary);
}

.emoji-trigger--set .emoji-trigger-value {
  font-size: 1.5rem;
  line-height: 1;
}

.emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* `hidden` on a flex container needs saying out loud — `display: flex` beats
   the attribute's UA `display: none`. */
.emoji-grid[hidden] {
  display: none;
}

.emoji-option {
  width: var(--space-10);
  height: var(--space-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--ease-fast), background-color var(--ease-fast);
}

.emoji-option:hover,
.emoji-option:focus-visible {
  border-color: var(--clr-green);
  background: var(--clr-green-dim);
  outline: none;
}

/* Clearing is a cell like any other, so there is no second control for it. */
.emoji-option--none {
  color: var(--text-muted);
}

.emoji-option--none:hover,
.emoji-option--none:focus-visible {
  border-color: var(--clr-red);
  background: var(--clr-red-light);
  color: var(--clr-red-dark);
}

/* ── Generic Filter Modal Fields ─────────────────────────── */
.adf-fields-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.adf-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.adf-modal-form {
  padding: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
}

.adf-scroll-region {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.adf-modal-form > .adf-actions {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-5) var(--space-5);
  border-top: 1px solid var(--border-light);
}

.adf-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Match the standard input label (.label-container) so single-/multi-select
   field labels in filter popups read identically to the text/date inputs. */
.adf-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.adf-input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  box-sizing: border-box;
  outline: none;
  transition: box-shadow var(--ease-fast);
}

.adf-input:focus {
  border-color: var(--border-focus);
  box-shadow: none;
}

.adf-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.adf-apply,
.adf-clear {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}

.adf-apply {
  background: var(--clr-green);
  color: var(--text-inverse);
  border: none;
}

/* A szín a buttons.css delete-variánsánál él — itt csak geometria (frontend.md). */
.adf-clear {
  gap: var(--space-1);
}

@media (max-width: 640px) {
  .adf-actions {
    flex-direction: column;
  }

  .adf-apply,
  .adf-clear {
    width: 100%;
  }
}

/* ── Coach News Card ─────────────────────────────────────── */
.cn-list {
  display: flex;
  flex-direction: column;
  /* Kártya-konténer → --layout-gap, mint a .card-list / .appt-group / .notif-list. */
  gap: var(--layout-gap);
}
.cn-card {
  background: var(--bg-card);
  border-radius: var(--radius-surface);
  border-left: 3px solid var(--clr-green);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* A kártyán kebab ül, a lenyíló pedig kilóg a dobozból: a klipelés levágná (frontend.md). */
  overflow: visible;
}
.cn-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.cn-coach { display: flex; align-items: center; gap: var(--card-row-gap); min-width: 0; }
.cn-coach-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  color: white;
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.cn-coach-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.cn-coach-name--link {
  text-decoration: none;
  cursor: pointer;
}
.cn-coach-name--link:hover { text-decoration: underline; }
.cn-dismiss {
  background: none;
  border: none;
  padding: var(--space-1);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background var(--ease-fast), color var(--ease-fast);
}
.cn-dismiss:hover { background: var(--bg-muted); color: var(--text-primary); }
/* Cím → kép → törzs egy link, de a szöveget nem festi át, különben link-blokknak olvasódna. */
.cn-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* A .cn-open csak a cím+kép+törzs dobozát fedi, a fejléc- és lábsor kívül marad;
   a globális :active (base.css) csak ezt zsugorítaná el a kártya többi részéhez
   képest, ezért a teljes .cn-card kapja a zsugorodást, a link sajátja letiltva. */
.cn-open:active {
  transform: none;
  filter: none;
}

.cn-card:has(.cn-open:active) {
  transform: scale(var(--tap-press-scale));
  filter: brightness(var(--tap-press-dim));
}
.cn-title { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); }
.cn-image {
  width: 100%;
  /* A news photo is not a fixed shape; cap the height so a portrait one cannot
     take over the dashboard, and crop to the cap rather than letterbox it. */
  max-height: 14rem;
  object-fit: cover;
  border-radius: var(--radius-surface);
  border: 1px solid var(--border-light);
}
.cn-body { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.cn-footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.cn-time { font-size: var(--text-xs); color: var(--text-muted); }
.cn-expiry { font-size: var(--text-xs); color: var(--tc-state-warn); }
.cn-audience { font-size: var(--text-xs); color: var(--text-muted); }
.cn-views {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
/* Pushed to the end of the row: it is the card's call to action, not one more
   piece of metadata. */
.cn-more {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--clr-green);
  text-decoration: none;
}
.cn-more:hover { text-decoration: underline; }

/* News image on the create/edit forms (coach and admin) */
.cn-form-preview {
  width: 100%;
  max-height: 12rem;
  object-fit: cover;
  border-radius: var(--radius-surface);
  border: 1px solid var(--border-light);
}
.cn-upload-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}
.cn-upload-label:hover { border-color: var(--clr-green); color: var(--text-primary); }
.cn-upload-label input[type="file"] { display: none; }
.cn-upload-hint { font-size: var(--text-xs); color: var(--text-muted); }

/* Admin news table: thumbnail + openable title */
.adm-news-thumb {
  width: 3rem;
  height: 2.25rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--space-2);
}
.adm-news-title { color: inherit; text-decoration: none; }
.adm-news-title:hover { color: var(--clr-green); text-decoration: underline; }

/* ── Coach News Index ─────────────────────────────────────── */
.ni-list { display: flex; flex-direction: column; }
.ni-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.ni-row:last-child { border-bottom: none; }
.ni-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ni-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.ni-meta { font-size: var(--text-xs); color: var(--text-muted); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ni-badge { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); border: 1px solid; }
.ni-badge--green { color: var(--clr-green); border-color: var(--clr-green); }
.ni-badge--gray  { color: var(--text-muted); border-color: var(--border); }
.ni-badge--blue  { color: var(--text-secondary); border-color: var(--border); }
.ni-badge--amber { color: var(--tc-state-warn); border-color: var(--tc-state-warn); }
.ni-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }