/*
 * Tennis Agent - Component Library
 * ================================
 * Reusable UI components built exclusively from design-tokens.css custom
 * properties. Import design-tokens.css before this file.
 *
 * Sections:
 *   1. Base / typography utilities
 *   2. Cards
 *   3. Buttons
 *   4. Form elements
 *   5. Navigation
 *   6. Status badges
 *   7. Loading states
 *   8. Chat bubbles
 *   9. App-specific composites (tournaments, results, admin rows)
 */

/* -------------------------------------------------------------------- */
/* 1. Base / typography utilities                                       */
/* -------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  background: var(--color-surface);
  color: var(--color-on-surface);
  padding-bottom: env(safe-area-inset-bottom);
}

.text-display {
  font-size: var(--font-display-size);
  line-height: var(--font-display-line-height);
  font-weight: var(--font-display-weight);
  margin: 0;
}

.text-headline-large {
  font-size: var(--font-headline-large-size);
  line-height: var(--font-headline-large-line-height);
  font-weight: var(--font-headline-large-weight);
  margin: 0;
}

.text-headline-medium {
  font-size: var(--font-headline-medium-size);
  line-height: var(--font-headline-medium-line-height);
  font-weight: var(--font-headline-medium-weight);
  margin: 0;
}

.text-title-large {
  font-size: var(--font-title-large-size);
  line-height: var(--font-title-large-line-height);
  font-weight: var(--font-title-large-weight);
  margin: 0;
}

.text-title-medium {
  font-size: var(--font-title-medium-size);
  line-height: var(--font-title-medium-line-height);
  font-weight: var(--font-title-medium-weight);
  margin: 0;
}

.text-body-large {
  font-size: var(--font-body-large-size);
  line-height: var(--font-body-large-line-height);
  font-weight: var(--font-body-large-weight);
  margin: 0;
}

.text-body-medium {
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  font-weight: var(--font-body-medium-weight);
  margin: 0;
}

.text-label-large {
  font-size: var(--font-label-large-size);
  line-height: var(--font-label-large-line-height);
  font-weight: var(--font-label-large-weight);
  margin: 0;
}

.text-muted {
  color: var(--color-on-surface-low);
  font-size: var(--font-body-large-size);
  line-height: var(--font-body-large-line-height);
}

.text-error {
  color: var(--color-error);
}

/* -------------------------------------------------------------------- */
/* 1b. Ikonos (KAN-93)                                                   */
/*                                                                       */
/* Emoji kaip ikonos nenaudojami: skirtinguose įrenginiuose jie atrodo    */
/* skirtingai, nesiderina su spalvų sistema ir ekrano skaitytuvui yra     */
/* triukšmas. Vietoje jų - vienspalvės SVG ikonos, piešiamos einamąja     */
/* teksto spalva (`currentColor`), todėl jos automatiškai tinka bet       */
/* kuriam mygtukui ar antraštei. Ikonos gali būti įrašytos tiesiai HTML   */
/* arba sudarytos `auth.js` funkcija `ikona("pavadinimas")`.              */
/* -------------------------------------------------------------------- */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  /* Tekste (ne flex konteineryje) ikona kitaip atsisėstų ant pagrindo linijos
     ir atrodytų nukritusi žemyn. */
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 1em;
  height: 1em;
}

.icon--lg {
  width: 1.75em;
  height: 1.75em;
}

/* -------------------------------------------------------------------- */
/* 2. Cards                                                              */
/* -------------------------------------------------------------------- */
.card {
  background: var(--color-surface-container);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  /* Lipni viršutinė juosta neturi uždengti kortelės antraštės, į kurią
     nuslinkta (nuoroda su fragmentu ar fokusas klaviatūra). */
  scroll-margin-top: calc(var(--nav-top-height) + var(--space-md));
  transition: box-shadow var(--transition-medium), transform var(--transition-medium);
}

.card > h2,
.card > .card-title {
  font-size: var(--font-title-medium-size);
  line-height: var(--font-title-medium-line-height);
  font-weight: var(--font-title-medium-weight);
  color: var(--color-primary);
  margin: 0 0 var(--space-md);
}

.card-elevated {
  box-shadow: var(--shadow-md);
}

.card-elevated:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.card-outlined {
  box-shadow: none;
  border: 1px solid var(--color-outline-variant);
}

.card-outlined:hover {
  border-color: var(--color-outline);
}

/* Kortelės antraštė su veiksmu: pavadinimas kairėje, mygtukas dešinėje.
   Siaurame ekrane mygtukas nusileidžia po pavadinimu (wrap). */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.card-header > h2,
.card-header > .card-title {
  font-size: var(--font-title-medium-size);
  line-height: var(--font-title-medium-line-height);
  font-weight: var(--font-title-medium-weight);
  color: var(--color-primary);
  margin: 0;
}

/* Duomenų šviežumo eilutė - kada sekcijos duomenys paskutinį kartą atnaujinti.
   `is-warning` naudojama tada, kai atnaujinti nepavyko ir rodomi seni duomenys. */
.data-freshness {
  margin: 0 0 var(--space-md);
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  color: var(--color-on-surface-variant);
}

.data-freshness:empty {
  display: none;
}

.data-freshness.is-warning {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-warning-container);
  color: var(--color-on-warning-container);
  font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* 3. Buttons                                                            */
/* -------------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-family-base);
  font-size: var(--font-label-large-size);
  line-height: var(--font-label-large-line-height);
  font-weight: 600;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  /* Mygtukas nėra nuoroda: `<a class="btn-*">` neturi būti pabrauktas. */
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* `display: inline-flex` nugalėtų `hidden` atributą (ta pati problema kaip
   `.field[hidden]` žemiau) - mygtukai, kurie rodomi sąlyginai (pvz. „Atšaukti
   aikštelę" tik kai aikštelė priskirta, KAN-241), be šios taisyklės liktų
   matomi net su `hidden`. */
.btn-primary[hidden],
.btn-secondary[hidden],
.btn-ghost[hidden],
.btn-danger[hidden] {
  display: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-primary:hover {
  background: var(--color-primary-light);
}

.btn-primary:active {
  background: var(--color-primary-dark);
}

.btn-secondary {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  border-color: var(--color-primary-container);
}

.btn-secondary:hover {
  background: #D3E6DA;
}

.btn-secondary:active {
  background: #C4DBCD;
}

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-outline-variant);
}

.btn-ghost:hover {
  background: var(--color-surface-variant);
}

.btn-ghost:active {
  background: var(--color-outline-variant);
}

.btn-danger {
  background: var(--color-error);
  color: #FFFFFF;
}

.btn-danger:hover {
  background: #A82121;
}

.btn-danger:active {
  background: #8F1B1B;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled {
  background: var(--color-surface-variant);
  color: var(--color-on-surface-low);
  border-color: var(--color-surface-variant);
  cursor: default;
}

/* -------------------------------------------------------------------- */
/* 4. Form elements                                                      */
/* -------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* display: flex nugalėtų [hidden] atributą, todėl paslėpimas nurodomas atskirai
   (pvz. „Data iki" laukas, atsirandantis tik pažymėjus datų intervalą) */
.field[hidden] {
  display: none;
}

.input-label {
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  color: var(--color-on-surface-variant);
}

.input {
  font-family: var(--font-family-base);
  font-size: var(--font-body-large-size);
  line-height: var(--font-body-large-line-height);
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  background: var(--color-surface-bright);
  color: var(--color-on-surface);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input::placeholder {
  color: var(--color-on-surface-low);
}

.input:hover {
  border-color: var(--color-outline);
}

.input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-primary-container);
}

.input:disabled {
  background: var(--color-surface-variant);
  color: var(--color-on-surface-low);
  cursor: default;
}

/* Pasirinkimo laukas. Naudoja tuos pačius .input stilius (rėmelį, tarpus,
   focus žiedą); paliekama tik naršyklės rodyklė ir žymeklis. */
select.input {
  cursor: pointer;
  appearance: auto;
}

.input-helper {
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  color: var(--color-on-surface-low);
}

.input-error {
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  color: var(--color-error);
}

.input.has-error {
  border-color: var(--color-error);
}

.input.has-error:focus-visible {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-container);
}

/* Mygtukų grupė vienam pasirinkimui iš kelių žinomų reikšmių (pvz. trukmė
   paieškos formoje, KAN-398) - kompaktiškesnė nei <select>, kai variantų
   nedaug ir jie trumpi. Vienu metu aktyvus tik vienas mygtukas
   (`.is-active`), naudotojas gali turėti tik ŽYMĖJIMO semantiką (ne veiksmo),
   todėl visi mygtukai `type="button"`. */
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.choice-group__btn {
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  background: var(--color-surface-bright);
  color: var(--color-on-surface);
  font-family: inherit;
  font-size: var(--font-body-medium-size);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.choice-group__btn:hover {
  border-color: var(--color-outline);
}

.choice-group__btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.choice-group__btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* -------------------------------------------------------------------- */
/* 4b. Priešininkų pasiūlymų sąrašas (autocomplete, KAN-201)             */
/*                                                                       */
/* Įvedimo laukas + po juo atsiveriantis pasiūlymų sąrašas. Sąrašas eina */
/* normaliame dokumento sraute (ne position: absolute) ir atsiradus     */
/* nustumia žemiau esančius laukus/mygtukus - kitaip plaukiojantis      */
/* sąrašas kompaktiškoje formoje uždengtų juos, ir paspaudimas ant      */
/* mygtuko po juo pataikytų į pasiūlymą, ne į mygtuką.                  */
/* -------------------------------------------------------------------- */
.autocomplete__list {
  margin: var(--space-xs) 0 0;
  padding: var(--space-xs);
  list-style: none;
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  max-height: 220px;
  overflow-y: auto;
}

.autocomplete__list[hidden] {
  display: none;
}

.autocomplete__option {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-on-surface);
  font-size: var(--font-body-large-size);
  line-height: var(--font-body-large-line-height);
}

.autocomplete__option:hover,
.autocomplete__option.is-active {
  background: var(--color-surface-variant);
}

/* Paaiškinimas, kai pasiūlymų nėra (KAN-337). Ne pasirinkimas, o tekstas:
   be `cursor`, be hover būsenos ir be `role="option"`, kad klaviatūra ir
   ekrano skaitytuvas jo nesiūlytų rinktis. */
.autocomplete__hint {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-on-surface-variant);
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
}

/* -------------------------------------------------------------------- */
/* 5. Navigation                                                         */
/* -------------------------------------------------------------------- */
.nav-top {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-sm) var(--space-md);
  padding-top: max(var(--space-sm), env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: var(--space-sm);
  gap: var(--space-sm);
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-top__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-top__logo {
  font-size: var(--font-title-large-size);
}

.nav-top__brand h1 {
  font-size: var(--font-title-large-size);
  line-height: var(--font-title-large-line-height);
  margin: 0;
}

.nav-top__status {
  color: var(--color-on-primary);
  font-size: var(--font-body-medium-size);
  opacity: 0.95;
}

.nav-top__status:empty {
  display: none;
}

/* Nepavykęs atnaujinimas - antraštėje būsena turi skirtis nuo sėkmingos. */
.nav-top__status.is-warning {
  color: var(--color-warning-container);
  font-weight: 600;
  opacity: 1;
}

.nav-top__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.nav-link {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--color-on-primary);
  font-size: var(--font-body-medium-size);
  font-weight: 600;
  padding: var(--space-xs) var(--space-sm);
  min-height: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.nav-link:hover,
.nav-link:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

/* -------------------------------------------------------------------- */
/* Navigacijos meniu antraštėje - vienintelis programėlės puslapių       */
/* sąrašas, tas pats visuose puslapiuose su bendra antrašte (KAN-178).   */
/* Mygtukas - antraštės kairėje, prieš logotipą, kad visų pločių         */
/* ekranuose (ypač mobiliuose, nuo 360px) jam visada liktų vietos ir jis */
/* nebūtų išstumtas kito antraštės turinio (KAN-185). Meniu atsidaro     */
/* kaip stalčius per visą aukštį iš kairės - dropdown per visą aukštį    */
/* patogesnis liesti nei siauras iškrentantis sąrašas. Trigerio stilius  */
/* toks pats kaip .nav-link, kad antraštės veiksmai atrodytų vienodai. */
/* -------------------------------------------------------------------- */
.nav-menu {
  position: relative;
  display: inline-flex;
}

.nav-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  color: var(--color-on-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.nav-menu__trigger:hover,
.nav-menu__trigger:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

/* Pridengia turinį už stalčiaus, kol meniu atidarytas - paspaudimas ant jo
   uždaro meniu, kaip ir bet kur kitur už jo ribų. */
.nav-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: var(--color-scrim);
}

.nav-menu__backdrop[hidden] {
  display: none;
}

.nav-menu__dropdown {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: min(280px, 85vw);
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-xs);
  padding-top: max(var(--space-xs), env(safe-area-inset-top));
  background: var(--color-surface-container);
  border: none;
  border-right: 1px solid var(--color-outline-variant);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  z-index: 30;
  overflow-y: auto;
}

.nav-menu__dropdown[hidden] {
  display: none;
}

.nav-menu__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-xs);
}

.nav-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border: none;
  background: transparent;
  color: var(--color-on-surface-variant);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.nav-menu__close:hover,
.nav-menu__close:focus-visible {
  background: var(--color-surface-variant);
}

.nav-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-sm);
  min-height: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-body-medium-size);
  font-weight: 500;
  color: var(--color-on-surface);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.nav-menu__item:hover,
.nav-menu__item:focus-visible {
  background: var(--color-surface-variant);
}

/* Skiria turinio puslapius (viršuje) nuo Nustatymų/Admin (apačioje). */
.nav-menu__separator {
  height: 1px;
  margin: var(--space-xs) var(--space-sm);
  background: var(--color-outline-variant);
}

/* -------------------------------------------------------------------- */
/* Antraštės sluoksniai (KAN-284) - kiekvienas atskira juosta per visą   */
/* plotį: (1) peržiūros juosta - tik impersonacijos metu, virš           */
/* antraštės; (2) pati antraštė (.nav-top) - meniu ir pavadinimas;       */
/* (3) vartotojo eilutė - avataras, vardas/pavardė, „Atsijungti", VISADA */
/* matoma, ir savo, ir peržiūros režime. .app-header sujungia visas tris */
/* į vieną lipnų (sticky) bloką, kad slenkant jos liktų matomos kartu.   */
/* -------------------------------------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-top__meniu {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Peržiūros juosta - įspėjamoji, rodoma TIK impersonacijos metu (žr.
   #perziuros-juosta ir atvaizduokVartotojoIndikatoriu auth.js). Pilnas
   plotis, ne pilė (KAN-282 versijoje ji turėjo tilpti tame pačiame
   antraštės eilutės plote kaip logotipas - dabar tam skirta sava juosta,
   tad teksto apkarpyti nebereikia). */
.impersonation-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  padding-top: max(var(--space-sm), env(safe-area-inset-top));
  background: var(--color-warning-container);
  color: var(--color-on-warning-container);
  border-bottom: 2px solid var(--color-warning);
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
}

.impersonation-bar__link {
  flex-shrink: 0;
  padding: 0;
  min-height: 0;
  background: transparent;
  border: none;
  color: var(--color-on-warning-container);
  font-size: var(--font-body-medium-size);
  font-weight: var(--font-label-large-weight);
  text-decoration: underline;
  cursor: pointer;
}

.impersonation-bar__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Vartotojo eilutė - avataras su inicialu, vardas ir pavardė tekstu bei
   dešiniajame krašte prispaustas „Atsijungti" mygtukas (.nav-link
   stilius, toks pats kaip kitų antraštės veiksmų). Rodo TĄ vartotoją,
   kurio paskyroje šiuo metu dirbama - savo arba peržiūrimą.
   Klasė vadinasi „.user-bar", NE „.user-row" - tas pavadinimas jau
   užimtas admino vartotojų sąrašo eilutės (žr. žemiau šiame faile), o
   tos pačios klasės antrą apibrėžimą naršyklė tyliai sujungtų su šiuo. */
.user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
}

.user-bar__identity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.user-bar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  font-size: var(--font-label-large-size);
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

/* Spalvų ramp'ai - kiekvienas vartotojas gauna stabilią spalvą pagal vardą */
.user-bar__avatar--0 {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

.user-bar__avatar--1 {
  background: var(--color-success-container);
  color: var(--color-on-success-container);
}

.user-bar__avatar--2 {
  background: var(--color-info-container);
  color: var(--color-on-info-container);
}

.user-bar__avatar--3 {
  background: var(--color-purple-container);
  color: var(--color-on-purple-container);
}

.user-bar__name {
  font-size: var(--font-body-medium-size);
  font-weight: 600;
  color: var(--color-on-primary);
  /* Pilnas vardas ir pavardė VISADA, be daugtaškio ir be nukirtimo (KAN-284)
     - juosta eina per visą plotį, tad vietos pakanka; itin ilgas vardas
     tiesiog laužomas į kitą eilutę, ne trumpinamas. */
  overflow-wrap: break-word;
}

.nav-link:active {
  background: rgba(255, 255, 255, 0.25);
}

.nav-link[hidden] {
  display: none;
}

.nav-link.is-active {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFFFFF;
}

/* Bottom navigation - mobile only */
.nav-bottom {
  display: none;
}

@media (max-width: 767px) {
  .nav-bottom {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--color-surface-bright);
    border-top: 1px solid var(--color-outline-variant);
    padding: var(--space-xs) 0;
    padding-bottom: max(var(--space-xs), env(safe-area-inset-bottom));
    position: sticky;
    bottom: 0;
    z-index: 10;
  }

  .nav-bottom__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1 1 0;
    min-height: var(--touch-target-min);
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-on-surface-low);
    font-size: var(--font-body-medium-size);
    text-decoration: none;
    cursor: pointer;
  }

  .nav-bottom__item.is-active {
    color: var(--color-primary);
  }
}

/* -------------------------------------------------------------------- */
/* 6. Status badges                                                      */
/* -------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-body-medium-size);
  font-weight: 600;
  padding: 3px var(--space-sm);
  border-radius: var(--radius-full);
  white-space: nowrap;
  background: var(--color-surface-variant);
  color: var(--color-on-surface-variant);
}

.badge-success {
  background: var(--color-success-container);
  color: var(--color-on-success-container);
}

.badge-warning {
  background: var(--color-warning-container);
  color: var(--color-on-warning-container);
}

.badge-error {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
}

.badge-info {
  background: var(--color-info-container);
  color: var(--color-on-info-container);
}

/*
 * Pranešimas turinio vietoje (klaida arba įspėjimas).
 *
 * Naudojamas visur, kur sekcija negali parodyti duomenų arba juos rodo tik iš
 * dalies, kad klaidos visame puslapyje atrodytų vienodai - nesvarbu, ar tai
 * varžybų, ar turnyrų kortelė.
 */
.inline-notice {
  display: block;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
}

.inline-notice--error {
  background: var(--color-error-container);
  border-color: var(--color-error);
  color: var(--color-on-error-container);
}

.inline-notice--warning {
  background: var(--color-warning-container);
  border-color: var(--color-warning);
  color: var(--color-on-warning-container);
}

/* Kelios pastabos iš eilės (pvz. po vieną neveikiančiai platformai). */
.inline-notice + .inline-notice {
  margin-top: var(--space-sm);
}

/*
 * Tuščios sekcijos paaiškinimas (KAN-92).
 *
 * Tuščias plotas be teksto vartotojui atrodo kaip sugedusi programa, todėl
 * kiekviena sekcija be duomenų pasako, KODĖL ji tuščia, o kai vartotojas gali
 * padėti - siūlo veiksmą (pvz. suvesti prisijungimo duomenis). Ramus variantas
 * naudojamas tada, kai viskas tvarkoje (įrašų tiesiog nėra) arba kai duomenys
 * dar renkami; `--warning` - kai reikia vartotojo veiksmo.
 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-variant);
  color: var(--color-on-surface-variant);
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
}

.empty-state--warning {
  border-color: var(--color-warning);
  background: var(--color-warning-container);
  color: var(--color-on-warning-container);
}

.empty-state__text {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
}

/* -------------------------------------------------------------------- */
/* 7. Loading states                                                     */
/* -------------------------------------------------------------------- */
.skeleton {
  display: block;
  border-radius: var(--radius-md);
  background: linear-gradient(
    90deg,
    var(--color-surface-variant) 25%,
    var(--color-outline-variant) 37%,
    var(--color-surface-variant) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.skeleton-text {
  width: 100%;
  height: var(--font-body-large-line-height);
}

.skeleton-title {
  width: 60%;
  height: var(--font-title-medium-line-height);
}

.skeleton-block {
  width: 100%;
  height: var(--space-xxl);
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-outline-variant);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spinner-spin 0.7s linear infinite;
}

@keyframes spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .spinner {
    animation: none;
  }
}

/* -------------------------------------------------------------------- */
/* 8. Chat bubbles                                                       */
/* -------------------------------------------------------------------- */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: var(--space-md);
}

.chat-thread:empty {
  margin-bottom: 0;
}

.bubble-user,
.bubble-assistant {
  max-width: 82%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-xl);
  font-size: var(--font-body-large-size);
  line-height: var(--font-body-large-line-height);
  white-space: pre-wrap;
  word-break: break-word;
}

.bubble-user {
  align-self: flex-end;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-bottom-right-radius: var(--radius-sm);
}

.bubble-assistant {
  align-self: flex-start;
  background: var(--color-surface-variant);
  color: var(--color-on-surface);
  border-bottom-left-radius: var(--radius-sm);
}

/* Burbulas su paieškos rezultatais: kortelės viduje reikalauja viso gijos
   pločio - 82 % riba jas suspaustų į kelis žodžius eilutėje. */
.bubble-assistant--rezultatai {
  max-width: 100%;
}

.bubble-assistant .slot-results {
  margin-top: var(--space-sm);
}

/* Kortelė ant burbulo fono lieka kortele - ji šviesesnė už burbulą. Burbulo
   `word-break` čia atšaukiamas: žinutės tekstą laužyti per žodžio vidurį
   priimtina, o datos ar korto pavadinimo - ne. */
.bubble-assistant .slot-result {
  background: var(--color-surface);
  word-break: normal;
}

/* -------------------------------------------------------------------- */
/* 9. App-specific composites                                           */
/* -------------------------------------------------------------------- */

/* Upcoming-match summary */
.match-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.match-summary .match-tournament {
  font-weight: 600;
  font-size: var(--font-body-large-size);
}

.match-summary .match-detail {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
}

.match-summary .match-detail strong {
  color: var(--color-on-surface);
}

.match-refresh-note {
  margin-top: var(--space-sm);
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
}

.match-refresh-note.is-warning {
  color: var(--color-on-warning-container);
  font-weight: 600;
}

/* Dashboard - framed "Artimiausios varžybos + Mano turnyrai" composition */
.dashboard-frame {
  border: 0.5px solid var(--color-outline-variant);
  border-radius: var(--radius-xxl);
  padding: var(--space-md);
  background: var(--color-surface-bright);
}

.dashboard-section > h2 {
  font-size: var(--font-title-medium-size);
  line-height: var(--font-title-medium-line-height);
  font-weight: var(--font-title-medium-weight);
  color: var(--color-primary);
  margin: 0 0 var(--space-sm);
}

/* Hero - the next upcoming match, full primary background */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}

.hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.hero__eyebrow {
  font-size: var(--font-label-large-size);
  line-height: var(--font-label-large-line-height);
  font-weight: var(--font-label-large-weight);
  text-transform: uppercase;
  opacity: 0.85;
}

.hero__time {
  font-size: var(--font-headline-large-size);
  line-height: var(--font-headline-large-line-height);
  font-weight: var(--font-title-large-weight);
}

.hero__meta {
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  opacity: 0.9;
}

.hero__empty {
  font-size: var(--font-body-large-size);
  line-height: var(--font-body-large-line-height);
  opacity: 0.9;
}

.hero__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--space-xxxl);
  height: var(--space-xxxl);
  border-radius: var(--radius-full);
  background: var(--surface-on-primary-soft);
  font-size: var(--font-headline-medium-size);
}

/* Stat cards - three themed "flag" tiles in a row */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.stat-grid:empty {
  display: none;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-left: var(--space-xs) solid transparent;
  border-radius: var(--radius-sm) var(--radius-flag) var(--radius-flag) var(--radius-sm);
}

.stat-card__label {
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  font-weight: 600;
}

.stat-card__value {
  font-size: var(--font-headline-medium-size);
  line-height: var(--font-headline-medium-line-height);
  font-weight: var(--font-title-large-weight);
}

.stat-card--amber {
  background: var(--bg-amber-soft);
  border-left-color: var(--border-amber);
  color: var(--text-amber);
}

.stat-card--green {
  background: var(--bg-green-soft);
  border-left-color: var(--border-green);
  color: var(--text-green);
}

.stat-card--purple {
  background: var(--bg-purple-soft);
  border-left-color: var(--border-purple);
  color: var(--text-purple);
}

/* Free-slot search results */
.slot-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Rezultato kortelė prisitaiko prie savo pločio: kai vietos pakanka, kortas ir
   laiko atkarpa telpa vienoje eilutėje; siaurame ekrane (ar pokalbio burbule)
   laikas nusileidžia į kitą eilutę, o ne suspaudžia korto pavadinimo iki vieno
   žodžio eilutėje. Tam laikas turi bazinį plotį - iš jo naršyklė ir sprendžia,
   ar dar telpa. */
.slot-result {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-body-large-size);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
}

.slot-result .slot-court {
  font-weight: 600;
}

/* Kairė rezultato pusė: kortas + arena/aikštelė, iš kurios jis rastas */
.slot-result__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
  flex: 1 1 11rem;
}

/* Rezultato data su savaitės diena – rodoma pirma, kad kelių dienų paieškoje
   iškart matytųsi, kuriai dienai laikas priklauso. */
.slot-result__data {
  font-size: var(--font-label-large-size);
  line-height: var(--font-label-large-line-height);
  font-weight: var(--font-label-large-weight);
  color: var(--color-primary-dark);
}

.slot-result__vieta {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
  overflow-wrap: anywhere;
}

.slot-result .slot-time {
  color: var(--color-on-surface-variant);
  font-size: var(--font-body-medium-size);
  /* Laiko atkarpa nelaužoma - siaurame ekrane laužiamas aikštelės pavadinimas */
  white-space: nowrap;
}

/* Radinys, kurio laikas jau nebelaisvas (KAN-395) - lieka sąraše (laikas,
   kurio nebeliko, nedingsta tyliai), bet blankesnis nei laisvi radiniai. */
.slot-result--nebelaisva .slot-court,
.slot-result--nebelaisva .slot-result__vieta,
.slot-result--nebelaisva .slot-time {
  color: var(--color-on-surface-low);
}

/* Active pending-request indicator */
.pending-request {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-warning-container);
  color: var(--color-on-surface);
  font-size: var(--font-body-medium-size);
}

.pending-request a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.pending-request a:hover {
  text-decoration: underline;
}

.pending-request[hidden] {
  display: none;
}

/* Aktyvių paieškų sąrašas: kiekviena eilutė - viena vykdoma arba fone laukianti
   paieška su savo atšaukimo mygtuku. Tarpus tarp eilučių duoda sąrašas, todėl
   atskirų eilučių apatinė paraštė nunulinama. */
.pending-requests {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pending-requests .pending-request {
  margin-bottom: 0;
}

.pending-request__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.pending-request__antraste {
  font-weight: 600;
}

.pending-request__santrauka {
  color: var(--color-on-surface-variant);
  overflow-wrap: anywhere;
}

/* Mygtukas nesitraukia ir nesilaužo - siaurame ekrane laužoma paieškos
   santrauka, o ne veiksmas. */
.pending-request__atsaukti {
  flex: none;
  white-space: nowrap;
}

/* Tournament accordion */
.tournament-block {
  border: 1px solid var(--color-outline-variant);
  border-left: var(--space-xs) solid var(--color-outline-variant);
  border-radius: var(--radius-sm) var(--radius-flag) var(--radius-flag) var(--radius-sm);
  overflow: hidden;
}

/* "Flag" left bar colored by tournament status: ahead (more scheduled than
   waiting) -> green, behind (more waiting than scheduled) -> amber. */
.tournament-block--ahead {
  border-left-color: var(--border-green);
}

.tournament-block--behind {
  border-left-color: var(--border-amber);
}

.tournament-block + .tournament-block {
  margin-top: var(--space-sm);
}

/* Turnyro antraštė - tinklelis, o ne viena eilutė. Siaurame ekrane eilutėje
   netilptų ir pavadinimas, ir dvi žymos: pavadinimas susispaustų iki vieno
   žodžio per eilutę, o žymos jį uždengtų. Todėl pavadinimas gauna visą eilutės
   plotį (be rodyklės), žymos nusileidžia į antrą eilutę, o rodyklė lieka
   dešinėje per abi eilutes. Nuo 768px viskas telpa į vieną eilutę. */
.tournament-block summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  background: var(--color-surface-variant);
}

.tournament-block summary::-webkit-details-marker {
  display: none;
}

.tournament-block summary::after {
  content: "\203A";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: var(--font-title-large-size);
  color: var(--color-on-surface-low);
  transform: rotate(90deg);
  transition: transform var(--transition-fast);
  margin-left: var(--space-xs);
}

.tournament-block summary > .tournament-header {
  grid-column: 1;
  grid-row: 1;
}

.tournament-block summary > .tournament-tally {
  grid-column: 1;
  grid-row: 2;
}

@media (min-width: 768px) {
  .tournament-block summary {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .tournament-block summary > .tournament-tally {
    grid-column: 2;
    grid-row: 1;
  }

  .tournament-block summary::after {
    grid-column: 3;
    grid-row: 1;
  }
}

.tournament-block[open] summary::after {
  transform: rotate(-90deg);
}

.tournament-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Ilgas pavadinimas („REWO Iššūkis vasara 2026 • Vilnius") laužomas tarp žodžių,
   o netelpantis žodis - viduje. Horizontalaus slinkimo nėra. */
.tournament-name {
  font-weight: 600;
  font-size: var(--font-body-large-size);
  overflow-wrap: anywhere;
}

/* Divizionas (lygis) yra VARŽYBŲ, o ne turnyro savybė: tame pačiame turnyre
   žaidėjas gali žaisti keliuose divizionuose. Todėl ši žyma rodoma prie
   kiekvienų varžybų - ir varžybų sąraše (`.tournament-match`), ir pagrindiniame
   puslapyje (`.compact-match`) - ir abiejose vietose atrodo vienodai. */
.match-division {
  font-size: var(--font-body-medium-size);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tournament-tally {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.tournament-matches {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: 1px solid var(--color-outline-variant);
}

/* Varžybų grupė praskleistame turnyro bloke - „Su sutarta data" /
   „Planuojamos" (KAN-240). Vien antraštė + sąrašas, be savo rėmelio: rėmelis
   jau yra kiekvienai `.tournament-match` eilutei, antras įdėjimo lygis jo
   negauna (žr. „Kortelė kortelėje - ne", DIZAINO_PRINCIPAI.md). */
.match-group__label {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-label-large-size);
  line-height: var(--font-label-large-line-height);
  font-weight: 600;
  color: var(--color-on-surface-variant);
}

.match-group__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tournament-match {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Kairysis kraštas paliktas nepaliestas (šaltinio spalvos juostelei,
   KAN-218) - viršus/dešinė/apačia gauna įspėjimo spalvą, ne visos keturios
   pusės (`border-color` šablonas paliestų ir kairę). */
.tournament-match.is-pending {
  background: var(--color-warning-container);
  border-top-color: var(--color-warning);
  border-right-color: var(--color-warning);
  border-bottom-color: var(--color-warning);
}

.tournament-match .match-detail {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Bendrų su susietu partneriu varžybų eilutė (KAN-258).
 *
 * Ne žyma (`.badge`): partnerio vardas yra laisvo ilgio tekstas, o žyma
 * `white-space: nowrap` siaurame ekrane iššoktų už kortelės krašto. Ne nauja
 * spalva ir ne nauja kortelės juostelė: kairysis kraštas jau neša šaltinio
 * spalvą (žr. „Viena juostelė vienam signalui", DIZAINO_PRINCIPAI.md), todėl
 * bendrumas rodomas tekstu su ta pačia antrinio plano spalva ir plonyte
 * skiriamąja linija kairėje - matomas skenuojant akimis, bet neužgožiantis
 * datos ir varžovų.
 *
 * Klasė bendra visoms rodymo vietoms (varžybų sąrašas, praskleista įvykių
 * srauto kortelė, veiksmų lango santrauka), kad ta pati informacija visur
 * atrodytų vienodai. */
.match-detail--bendros {
  border-left: 2px solid var(--color-outline-variant);
  padding-left: var(--space-sm);
  color: var(--color-on-surface-variant);
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.tournament-match .match-status {
  font-size: var(--font-body-medium-size);
  font-weight: 600;
  margin-top: var(--space-xs);
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Planuojamų varžybų eilutė, kuri paspaudus atidaro veiksmų langą (KAN-241) -
   eilutė pati yra <button>, todėl reikalingas mygtuko atstatymo stilius
   (fonas, lygiavimas, šriftas), o ne tik `.tournament-match` kortelės
   apipavidalinimas - ta pati konvencija kaip `.reservation-row` (KAN-182). */
.tournament-match--clickable {
  width: 100%;
  background: none;
  font-family: var(--font-family-base);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.tournament-match--clickable:hover {
  background-color: var(--color-surface-variant);
}

.tournament-match--clickable:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

/* Mygtukas „Į kalendorių" (KAN-207) - kompaktiškas, ne per visą kortelės
   plotį, ta pati mažesnio mygtuko konvencija kaip `.user-row__actions`. */
.match-actions {
  display: flex;
}

.match-actions .btn-secondary,
.match-actions .btn-ghost {
  min-height: 36px;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-body-medium-size);
}

/* Turnyrų registracijos (ne suplanuotos varžybos).
   Ta pati vizualinė kalba kaip `.tournament-block` varžybų sekcijoje - rėmelis,
   suapvalinti kampai, pilkas antraštės fonas - bet be akordeono, nes
   registracijos visada rodomos iš karto ir jų nereikia slėpti (KAN-180).
   Kelios registracijos skiriamos tarpu, ne linija - kiekviena jau turi savo
   rėmelį. */
.tournament-registration {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tournament-registration + .tournament-registration {
  margin-top: var(--space-sm);
}

/* Antraštės juosta: pavadinimas ir platforma ryškiai, pradžios data - antru
   planu po jais (`.tournament-detail`). */
.tournament-registration__header {
  padding: var(--space-md);
  background: var(--color-surface-variant);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Žyma („Vienetai" / „Dvejetai") yra stulpelio elementas, todėl be šios
   eilutės ji išsitemptų per visą eilutės plotį ir atrodytų kaip mygtukas. */
.tournament-registration .tournament-header {
  gap: var(--space-xs);
  align-items: flex-start;
}

.tournament-registration .tournament-name {
  font-size: var(--font-body-large-size);
  font-weight: 600;
}

.tournament-detail {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
}

/* Divizionai vieno turnyro kortelėje: žaidėjas gali būti užsiregistravęs į kelis
   to paties turnyro divizionus. Įrašai skiriami plona linija, o ne savo rėmeliu
   - rėmelis jau yra pačiai registracijai, dar vienas viduje atrodytų kaip klaida. */
.tournament-divisions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: 1px solid var(--color-outline-variant);
}

.tournament-division-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tournament-division-item + .tournament-division-item {
  border-top: 1px solid var(--color-outline-variant);
  padding-top: var(--space-sm);
}

.tournament-division-name {
  font-size: var(--font-body-medium-size);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Partnerio pasirinkimas turnyro registracijos kortelėje (KAN-257).
   Ta pati kortelė kaip `.tournament-registration` viršuje, o čia - jos apatinė
   dalis: tarpai ir skirianti linija tokie patys kaip `.tournament-divisions`,
   kad partnerių skiltis nustatymuose atrodytų kaip ta pati turnyro kortelė, tik
   su kitu turiniu. Kelios registracijos (divizionai) viename turnyre skiriamos
   plona linija, ne savo rėmeliu - rėmelis jau yra pačiai kortelei. */
.partner-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: 1px solid var(--color-outline-variant);
}

.partner-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.partner-choice + .partner-choice {
  border-top: 1px solid var(--color-outline-variant);
  padding-top: var(--space-md);
}

/* Ryšio būsena po pasirinkimo lauku. Atskiras konteineris reikalingas dėl to,
   kad `.partner-choice` yra flex stulpelis - be jo žyma išsitemptų per visą
   plotį ir atrodytų kaip mygtukas, nors tai vien būsena. Rodoma TIK kai ryšys
   tikrai yra. */
.partner-choice__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* Šaltinio (platformos) žyma turnyro registracijos kortelėje */
.tournament-platform {
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  color: var(--color-on-surface-variant);
}

/* -------------------------------------------------------------------- */
/* Arenų tabai ir rezervacijų eilutės (KAN-159 / KAN-160)                */
/* -------------------------------------------------------------------- */
/* Tabų juosta rezervacijos.html viršuje - po vieną tabą kiekvienai arenai,
   kuriai vartotojas turi kredencialus. Rodoma net su viena arena, kad
   vartotojas matytų, iš kur duomenys, ir kad pridėjus antrą areną sąsaja
   nepasikeistų. Slenka horizontaliai, jei arenų daug ir netelpa. */
.arena-tabs {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-outline-variant);
  margin-bottom: var(--space-md);
}

.arena-tabs__tab {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-xs);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: inherit;
  font-size: var(--font-body-medium-size);
  font-weight: 600;
  color: var(--color-on-surface-variant);
  cursor: pointer;
}

.arena-tabs__tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.arena-tabs__tab:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Sąskaitos kreditas tabo antraštėje (KAN-160) - matomas tik tai arenai,
   kuriai portalas jį grąžino; kitaip tabas atrodo kaip iki šiol. */
.arena-tabs__kreditas {
  font-size: var(--font-label-large-size);
  font-weight: 600;
  color: var(--color-on-surface-variant);
}

.arena-tabs__kreditas.is-negative {
  color: var(--color-on-warning-container);
}

/* Rezervacijų yra daug (dešimtys, siekia kelis metus į priekį), todėl
   kiekviena rodoma VIENA eilute, ne kortele - kortelių sąrašas tokio ilgio
   virstų begaline juosta. Eilutė be rėmelio (kortelė kortelėje duotų dvigubą
   rėmelį), skiriama plona linija - kaip `.user-row`, `.compact-match`.
   Privaloma tvarka: arena → kortas → laikas → trukmė → kaina. Arena ir kortas
   sudėti į vieną nesilaužantį bloką (`.reservation-row__loc`), kad siaurame
   ekrane, laužiant eilutę į dvi, jie visada liktų kartu ir pirmi. */
.reservation-row-list {
  display: flex;
  flex-direction: column;
}

/* Eilutė yra mygtukas (KAN-182) - paspaudus atsidaro rezervacijos detalių
   sluoksnis. Todėl čia ir numatytojo mygtuko atstatymas (fonas, rėmelis,
   šriftas, lygiavimas), o ne tik sąrašo eilutės apipavidalinimas. */
.reservation-row {
  display: block;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) 0;
  border: none;
  border-bottom: 1px solid var(--color-outline-variant);
  background: none;
  font-family: var(--font-family-base);
  font-size: var(--font-body-medium-size);
  color: inherit;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.reservation-row:hover {
  background-color: var(--color-surface-variant);
}

.reservation-row:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

.reservation-row:first-child {
  padding-top: 0;
}

.reservation-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.reservation-row__loc {
  font-weight: 600;
  color: var(--color-on-surface);
  white-space: nowrap;
}

.reservation-row__laikas {
  color: var(--color-on-surface-variant);
}

/* Kompaktiška žyma eilutėje, kai rezervacijai jau suplanuotos varžybos -
   be detalių (jos „Mano varžybų" puslapyje). Atskirta nuo laiko bloko
   tarpu, ne skirtuku „·", kad vizualiai skirtųsi nuo privalomos laukų
   tvarkos (arena → kortas → laikas → trukmė → kaina). */
.reservation-row__zyma {
  margin-left: var(--space-xs);
}

/* „Rodyti daugiau" / „Rodyti mažiau" - po pirmomis RODOMU_RIBA eilutėmis,
   kai jų daugiau (KAN-168), o išskleidus - po visu sąrašu, kad jį būtų
   galima vėl sutraukti. Tekstinė nuoroda, ne `.btn-*` mygtukas - sąraše ji
   turi svertis kaip dar viena eilutė, ne kaip atskiras veiksmas. */
.reservation-row-list__daugiau,
.reservation-row-list__maziau,
.feed-list__daugiau,
.feed-list__maziau {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) 0;
  background: none;
  border: none;
  color: var(--color-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-body-medium-size);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.reservation-row-list__daugiau:hover,
.reservation-row-list__maziau:hover,
.feed-list__daugiau:hover,
.feed-list__maziau:hover {
  text-decoration: underline;
}

.reservation-row-list__daugiau:focus-visible,
.reservation-row-list__maziau:focus-visible,
.feed-list__daugiau:focus-visible,
.feed-list__maziau:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Pasirenkama rezervacijos (arba, nuo antros KAN-242 krypties, varžybų)
   eilutė - ta pati eilutės struktūra, tarpai ir šriftų dydžiai kaip
   `.reservation-row` (KAN-182), tik <label> su žymimuoju langeliu vietoj
   <button>. Žymimasis langelis - `checkbox`, kai galima pažymėti kelis
   įrašus iš karto (rezervacijos, varžybos per dvi aikšteles), arba `radio`,
   kai leidžiamas tik VIENAS pasirinkimas (rezervacijos „Planuoti varžybas"
   lango „Iš mano varžybų" varžybų sąrašas, `js/rezervacijos.js`) - abu tos
   pačios eilutės klasės, tik įvesties tipas skiriasi. Turinio elementai
   (`.reservation-row__loc`, `__laikas`, `__zyma`) - TIE PATYS kaip
   `.reservation-row`, kad tekstas atrodytų identiškai. */
.reservation-row-select {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) 0;
  border: none;
  border-bottom: 1px solid var(--color-outline-variant);
  cursor: pointer;
}

.reservation-row-select:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.reservation-row-select input[type="checkbox"],
.reservation-row-select input[type="radio"] {
  width: var(--space-lg);
  height: var(--space-lg);
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

.reservation-row-select__turinys {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-body-medium-size);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Su kitomis varžybomis jau susieta rezervacija - matoma, bet nepažymima
   (KAN-242 apdaila): žymimasis langelis neaktyvus, o visa eilutė pilkesnė,
   kad neatrodytų kaip įprastas, tiesiog nepažymėtas pasirinkimas. */
.reservation-row-select--disabled {
  cursor: default;
}

.reservation-row-select--disabled .reservation-row-select__turinys,
.reservation-row-select--disabled .reservation-row__loc,
.reservation-row-select--disabled .reservation-row__laikas {
  color: var(--color-on-surface-low);
}

.reservation-row-select--disabled input[type="checkbox"] {
  cursor: default;
}

/* Įvykių srautas (pradinis langas, KAN-179, kortelės vaizdas - KAN-234 2/3) -
   viename chronologiniame sąraše sumaišytos varžybos, planuojamos varžybos
   (be sutarto laiko) ir nesuderintos rezervacijos. Įrašas - išskleidžiama
   eilutė (<details>/<summary>, tas pats mechanizmas kaip `.tournament-block`),
   ne kortelė (KAN-91/93 „kortelė kortelėje - ne") - skiriama plona linija kaip
   `.reservation-row-list`. Kairysis kraštas rezervuotas šaltinio spalvos
   juostelei (KAN-218, `.card-source--<token>` - žr. failo pabaigą): pagal ją
   varžybos ir rezervacija sraute jau skiriasi spalva, todėl atskiro
   įspėjimo akcento tam nebereikia.

   Suskleistos kortelės viduje - dvi eilutės (KAN-234 2/3): viršuje įrašo
   tipas (`.feed-item__tipas`, dešinėje, antraeilis signalas), žemiau
   pagrindinė eilutė (`.feed-item__pagrindine`) su svarbiausia informacija
   paryškinta (`.feed-item__akcentas`) - tas pats šriftų/tarpų rinkinys
   visiems trims tipams. */
.feed-list {
  display: flex;
  flex-direction: column;
}

/* Grupės antraštė „Be datos" (KAN-247) - įrašams, kuriems rūšiavimo datos
   nustatyti nepavyko, o ne tyliai iškrinta iš sąrašo. Pati `.match-group__label`
   klasė bendra su varžybų sąrašo grupėmis (KAN-240, `varzybos.js`); čia jai
   reikia tik viršutinio tarpo nuo prieš tai einančio įrašo apatinio brūkšnio. */
.feed-list .match-group__label {
  margin-top: var(--space-sm);
}

/* Riba tarp rezervacijų/varžybų dalies ir „Planuojamos" dalies (KAN-252) -
   planuojama varžyba yra priminimas susitarti, ne įvykis, todėl visada
   apačioje, su matoma riba, kad tvarka neatrodytų sugedusi. Skiriasi nuo
   paprastos `.match-group__label` (aukščiau) papildoma linija ir didesniu
   viršutiniu tarpu - žymi dalies, ne vien datos grupės, pradžią. */
.feed-list .match-group__label--riba {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-outline-variant);
}

.feed-item {
  border-bottom: 1px solid var(--color-outline-variant);
  border-left: var(--space-xs) solid transparent;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-sm);
}

.feed-item:first-child {
  padding-top: 0;
}

.feed-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.feed-item summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--touch-target-min);
  cursor: pointer;
  list-style: none;
  line-height: 1.5;
}

.feed-item summary::-webkit-details-marker {
  display: none;
}

.feed-item summary::after {
  content: "\203A";
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--font-title-large-size);
  color: var(--color-on-surface-low);
  transform: rotate(90deg);
  transition: transform var(--transition-fast);
}

.feed-item[open] summary::after {
  transform: rotate(-90deg);
}

/* Įrašui be papildomos informacijos (KAN-236) - ta pati eilutės struktūra
   kaip `summary`, bet be `cursor: pointer` ir be praskleidimo ženklo, nes
   tokia kortelė apskritai nėra `<details>` - atidaryti nėra ko. */
.feed-item__rodinys {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--touch-target-min);
  line-height: 1.5;
}

.feed-item__turinys {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.feed-item__tipas {
  align-self: flex-end;
  font-size: var(--font-label-small-size);
  line-height: var(--font-label-small-line-height);
  font-weight: var(--font-label-small-weight);
  color: var(--color-on-surface-low);
}

.feed-item__pagrindine {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
  overflow-wrap: anywhere;
}

.feed-item__akcentas {
  font-weight: 700;
  color: var(--color-on-surface);
}

.feed-item__detales {
  padding: var(--space-sm) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
  overflow-wrap: anywhere;
}

/* Auth pages */
.auth-page {
  max-width: 480px;
}

.auth-card > h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-title-large-size);
  color: var(--color-primary);
}

.auth-link {
  margin: var(--space-md) 0 0;
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
  text-align: center;
}

.auth-link a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-link a:hover {
  text-decoration: underline;
}

.auth-card .text-error {
  margin-bottom: var(--space-sm);
  font-size: var(--font-body-medium-size);
}

/* Admin user rows.

   Eilutės viduje kortelės nepiešiama: sąrašas jau yra baltoje `.card`
   kortelėje, o antras rėmelis jos viduje sukurtų dvigubą rėmelį. Eilutės
   skiriamos plona linija, kaip ir kituose sąrašuose (`.compact-match`). */
.user-row-list {
  display: flex;
  flex-direction: column;
}

.user-row {
  border-bottom: 1px solid var(--color-outline-variant);
  padding: var(--space-md) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.user-row:first-child {
  padding-top: 0;
}

.user-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.user-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-row__info .match-detail {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
}

.user-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.user-row__actions .btn-primary,
.user-row__actions .btn-danger,
.user-row__actions .btn-secondary {
  min-height: 36px;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-body-medium-size);
}

/* Chat panel */
.chat-card {
  display: flex;
  flex-direction: column;
}

.chat-form input {
  flex: 1;
  min-width: 0;
}

.chat-form__send {
  flex-shrink: 0;
  width: 52px;
  padding: 0;
  font-size: var(--font-title-large-size);
}

.chat-form__voice {
  flex-shrink: 0;
  width: 52px;
  padding: 0;
  font-size: var(--font-title-large-size);
}

/* Agento žinutės laukas (KAN-410) - <textarea>, kad tilptų kelios eilutės;
   auga iki maždaug 4 eilučių aukščio (js/aiksteliu_paieska.js), toliau
   slenka savo viduje. Mygtukai eina POD lauku (žr. HTML), ne šalia jo. */
.chat-form__textarea {
  resize: none;
  overflow-y: auto;
}

.chat-form__voice[data-recording="true"] {
  background-color: var(--color-error);
  color: var(--color-surface-bright);
  animation: pulse-recording 1.5s ease-in-out infinite;
}

@keyframes pulse-recording {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@media (min-width: 768px) {
  /* Lipni pokalbio panelė negali nusileisti žemiau plaukiojančio mygtuko -
     antraip FAB uždengtų jos turinį (mygtukas fiksuotas, panelė - ne). */
  .chat-card {
    height: min(
      600px,
      calc(100vh - var(--sticky-aside-top) - var(--fab-clearance))
    );
  }

  .chat-thread {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
  }
}

/* Search / lookup forms.

   Forma lieka vienu stulpeliu bet kokiame ekrane: visų laukų kairysis kraštas
   sudaro vieną vertikalę, o vienoje eilutėje jungiami tik semantiškai susiję
   laukai (dvi intervalo datos - žr. `.search-form__dates`). Paieškos mygtukas
   plačiame ekrane netempiamas per visą plotį. */
@media (min-width: 768px) {
  .search-form .btn-primary {
    align-self: flex-start;
  }
}

/* -------------------------------------------------------------------- */
/* 10. Onboarding vedlys (KAN-53)                                        */
/* -------------------------------------------------------------------- */
.wizard {
  max-width: 560px;
}

/* Progreso juosta viršuje (žingsnis X iš 6) */
.wizard-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.wizard-progress__label {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
  font-weight: 600;
}

.wizard-progress__track {
  height: var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-surface-variant);
  overflow: hidden;
}

.wizard-progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width var(--transition-medium);
}

.wizard-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.wizard-step[hidden] {
  display: none;
}

.wizard-lead {
  font-size: var(--font-body-large-size);
  line-height: var(--font-body-large-line-height);
  color: var(--color-on-surface-variant);
}

/* Paaiškinimas KODĖL reikia duomenų - subtili info dėžutė */
.wizard-note {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-info-container);
  color: var(--color-on-info-container);
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
}

/* Vedlio navigacijos mygtukų juosta apačioje */
.wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

/* Pažymimų platformų sąrašas (checkbox) */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Žymimasis langelis sąrašuose (vedlys, nustatymai) - su rėmeliu */
.check-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  min-height: var(--touch-target-min);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.check-item:hover {
  border-color: var(--color-outline);
}

.check-item input[type="checkbox"] {
  width: var(--space-lg);
  height: var(--space-lg);
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

.check-item__label {
  font-size: var(--font-body-large-size);
  color: var(--color-on-surface);
}

/* Žymimasis langelis formos sąlygose (paieška) - kompaktiškas, be rėmelio */
.check-item--form {
  padding: 0;
  border: none;
  min-height: auto;
  gap: var(--space-xs);
}

.check-item--form:hover {
  border-color: transparent;
}

.check-item--form input[type="checkbox"] {
  width: var(--space-lg);
  height: var(--space-lg);
}

.check-item--form .check-item__label {
  font-size: var(--font-body-large-size);
  color: var(--color-on-surface);
}

/* Paieškos formos datos - VISADA vienoje eilutėje, taip pat ir telefone.
   Nepažymėjus datų intervalo eilutėje yra viena data; pažymėjus - dvi datos,
   atskirtos brūkšneliu. Laukai dalijasi eilutės plotį po lygiai (`flex: 1 1 0`),
   o `min-width: 0` leidžia jiems susitraukti - antraip įgimtas `input[type=date]`
   plotis išstumtų antrą lauką už ekrano krašto. */
.search-form__dates {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
}

.search-form__dates .field {
  flex: 1 1 0;
  min-width: 0;
}

.search-form__dates .input {
  min-width: 0;
  /* Siauresni šoniniai tarpai - kad dvi datos su brūkšneliu tilptų ~360px
     pločio ekrane, nesumažinant lietimo srities aukščio. */
  padding-inline: var(--space-sm);
}

.search-form__dates-separator {
  align-self: flex-end;
  padding-bottom: var(--space-sm);
  color: var(--color-on-surface-variant);
  font-size: var(--font-body-large-size);
}

.search-form__dates-separator[hidden] {
  display: none;
}

/* Nustatymų pagrindinio lango grupių sąrašas - kiekviena grupė atsidaro
   savo lange (`hidden` perjungimas tame pačiame puslapyje, ta pati
   konvencija kaip rezervacijos detalių sluoksnis, KAN-182). Eilutė - tas
   pats apipavidalinimas kaip `.reservation-row` (mygtuko atstatymas,
   apatinė linija), tik su antru, prislopintu paaiškinimo tekstu ir
   rodyklės ženklu dešinėje. (KAN-272) */
.settings-menu {
  display: flex;
  flex-direction: column;
}

.settings-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-md) 0;
  border: none;
  border-bottom: 1px solid var(--color-outline-variant);
  background: none;
  font-family: var(--font-family-base);
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.settings-menu__item:hover,
.settings-menu__item:focus-visible {
  background-color: var(--color-surface-variant);
}

.settings-menu__item:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

.settings-menu__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-menu__item:first-child {
  padding-top: 0;
}

.settings-menu__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.settings-menu__title {
  font-size: var(--font-body-large-size);
  font-weight: 600;
  color: var(--color-on-surface);
}

.settings-menu__desc {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
}

.settings-menu__chevron {
  margin-left: auto;
  color: var(--color-on-surface-low);
  font-size: var(--font-title-large-size);
  line-height: 1;
}

/* Vieno platformos prisijungimo forma vedlyje / nustatymuose */
.platform-form {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.platform-form__title {
  font-weight: 600;
  font-size: var(--font-body-large-size);
  color: var(--color-primary);
}

/* Santraukos / prijungtų platformų sąrašas */
.platform-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.platform-row {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.platform-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.platform-row__name {
  font-weight: 600;
  font-size: var(--font-body-large-size);
}

.platform-row__user {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
}

/* Siaurame ekrane veiksmai laužomi į kelias eilutes (kitaip 3-4 mygtukai
   išstumia eilutę už ekrano ribų); nuo 768px vėl telpa vienoje eilutėje. */
.platform-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  min-width: 0;
}

@media (min-width: 768px) {
  .platform-row__actions {
    flex-shrink: 0;
  }
}

.platform-row__actions .btn-primary,
.platform-row__actions .btn-secondary,
.platform-row__actions .btn-ghost,
.platform-row__actions .btn-danger {
  min-height: 36px;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-body-medium-size);
}

/* Kredencialų patikros būsenos eilutė - „Tikrinama…" / rezultatas (KAN-53).
   Naudojama prisijungimo formoje (vedlys, nustatymai) po duomenų išsaugojimo. */
.tikrinimo-busena {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  background: var(--color-surface-variant);
  color: var(--color-on-surface-variant);
}

/* display: flex nugalėtų [hidden] atributą, todėl paslėpimas nurodomas atskirai */
.tikrinimo-busena[hidden] {
  display: none;
}

.tikrinimo-busena--pavyko {
  background: var(--color-success-container);
  color: var(--color-on-success-container);
}

.tikrinimo-busena--klaida {
  background: var(--color-warning-container);
  color: var(--color-on-warning-container);
}

/* Pranešimų kanalai (nustatymai + vedlio pabaiga) - KAN-60 */
.notify-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.notify-channel {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.notify-channel__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.notify-channel__label {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
}

/* Kopijuojama techninė reikšmė - laužoma, kad ilga tema tilptų telefone */
.notify-channel__value {
  font-family: var(--font-family-mono);
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  color: var(--color-on-surface);
  word-break: break-all;
}

.notify-channel__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Antraštė virš prenumeratos instrukcijų */
.notify-heading {
  margin: var(--space-lg) 0 var(--space-sm);
}

/* Numeruotos prenumeratos instrukcijos */
.notify-steps {
  margin: 0;
  padding-left: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  color: var(--color-on-surface-variant);
}

.notify-steps code {
  font-family: var(--font-family-mono);
  color: var(--color-on-surface);
}

/* -------------------------------------------------------------------- */
/* 11. Modaliniai langai + plaukiojantis mygtukas (FAB) (KAN-54)         */
/* -------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--color-scrim);
  overscroll-behavior: contain;
}

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

/* Kol langas atidarytas, fonas neslenka (KAN-357) - žymima ant <html>, nes
   `position: fixed` ant <body> savaime neužtenka: be jo iOS Safari fonas vis
   tiek "prasiveržia" per sąrašo kraštą. Tikslią slinkimo poziciją prieš
   užrakinant išsaugo ir po atrakinimo grąžina js/modalo_slinkimas.js. */
html.js-modalas-atidarytas {
  overflow: hidden;
}

html.js-modalas-atidarytas body {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  background: var(--color-surface-container);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
}

/* Lango turinio slinkimo sritis - kiekvienam .modal-overlay ją automatiškai
   sukuria js/modalo_slinkimas.js, apgaubdamas viską tarp antraštės ir
   apatinių mygtukų. Naujam langui nereikia jokios atskiros klasės - pakanka
   įprastos .modal-overlay/.modal__header/.cluster žymėjimo. */
.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Tarpinis apvalkalas, kai apatiniai mygtukai yra ne tiesiogiai .modal, o
   giliau (pvz. <form class="stack"> viduje) - be šito aukščio ribojimas
   nepasiektų giliausio lygio ir .modal__body neturėtų nuo ko skaičiuoti. */
.modal__scroll-host {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Apatinių mygtukų juosta - visada matoma, slenka tik .modal__body virš jos. */
.modal__footer {
  flex-shrink: 0;
}

/* Skirtukas tarp dviejų alternatyvių to paties lango kelių (pvz. agento
   pokalbis / forma, KAN-410) - plona linija abipus trumpo užrašo. Užrašas
   nebūtinas: be jo, `<span>` tiesiog nededamas ir lieka viena linija. */
.modal__skirtukas {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-on-surface-low);
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
}

.modal__skirtukas::before,
.modal__skirtukas::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-outline-variant);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-shrink: 0;
}

.modal__title {
  font-size: var(--font-title-large-size);
  line-height: var(--font-title-large-line-height);
  font-weight: var(--font-title-large-weight);
  color: var(--color-primary);
  margin: 0;
}

.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border: none;
  background: transparent;
  color: var(--color-on-surface-variant);
  font-size: var(--font-title-large-size);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.modal__close:hover {
  background: var(--color-surface-variant);
}

.modal__close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Plaukiojantis apskritas mygtukas - apatinis dešinys kampas */
.fab {
  position: fixed;
  right: var(--fab-offset);
  bottom: max(calc(var(--bottom-bar-height) + var(--fab-offset)), env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fab-size);
  height: var(--fab-size);
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--font-title-large-size);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.fab:hover {
  background: var(--color-primary-light);
  transform: translateY(-1px);
}

.fab:active {
  background: var(--color-primary-dark);
}

.fab:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Puslapiai su apatine chat/input juosta – FAB mygtukas pasitraukia aukščiau.
   Kartu perskaičiuojamas ir turinio rezervas: `--fab-clearance` reikšmė
   apskaičiuojama ten, kur ji paskelbta, todėl pakeitus tik
   `--bottom-bar-height` rezervas liktų senas. */
.has-bottom-bar {
  --bottom-bar-height: calc(var(--touch-target-min) + var(--space-lg));
  --fab-clearance: calc(
    var(--bottom-bar-height) + var(--fab-offset) + var(--fab-size) + var(--space-md)
  );
}

/* Nedidelė patvirtinimo žinutė po išsiuntimo ("Ačiū, gavome!") */
.form-success {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-success-container);
  color: var(--color-on-success-container);
  font-size: var(--font-body-large-size);
  text-align: center;
}

.form-success[hidden] {
  display: none;
}

/* -------------------------------------------------------------------- */
/* 12. Admin - atsiliepimų sąrašas (KAN-54)                              */
/* -------------------------------------------------------------------- */
.feedback-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.feedback-item {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Neperskaityti atsiliepimai - švelnus fonas + akcentinė kairė juosta */
.feedback-item.is-unread {
  background: var(--color-info-container);
  border-left: var(--space-xs) solid var(--color-info);
}

.feedback-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.feedback-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.feedback-item__author {
  font-weight: 600;
  font-size: var(--font-body-large-size);
}

.feedback-item__date {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
}

.feedback-item__text {
  font-size: var(--font-body-large-size);
  line-height: var(--font-body-large-line-height);
  white-space: pre-wrap;
  word-break: break-word;
}

.feedback-item__actions {
  display: flex;
  gap: var(--space-sm);
}

.feedback-item__actions .btn-secondary {
  min-height: 36px;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-body-medium-size);
}

/* -------------------------------------------------------------------- */
/* 13. Puslapių antraštės (page headers) - grįžimo mygtukas            */
/* -------------------------------------------------------------------- */
.page-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  scroll-margin-top: calc(var(--nav-top-height) + var(--space-md));
}

.page-header__back {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 1.5em;
  padding: 0;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.page-header__back:hover,
.page-header__back:focus-visible {
  background-color: var(--color-surface-variant);
}

.page-header__back:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* -------------------------------------------------------------------- */
/* 14. Kompaktiškos varžybų kortelės (index.html laukiamos varžybos)    */
/* -------------------------------------------------------------------- */
/* Mobiliajame - viena kortelė vienoje kolonoje (data → pavadinimas → varžovai
   → būsena). Trijų stulpelių lentelė siaurame ekrane suspaustų vidurinį
   stulpelį tiek, kad turnyro pavadinimas lūžtų po vieną žodį eilutėje, o
   būsenos žyma būtų nukirsta dešiniajame krašte. Trys stulpeliai atsiranda
   tik nuo 768px, kur vietos tikrai užtenka. */
.compact-match {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-outline-variant);
  min-width: 0;
}

.compact-match:first-child {
  padding-top: 0;
}

.compact-match:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.compact-match__date {
  font-size: var(--font-body-medium-size);
  font-weight: 600;
  color: var(--color-on-surface);
}

.compact-match__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

/* Ilgas turnyro pavadinimas („REWO Iššūkis vasara 2026 • Vilnius") laužomas
   tarp žodžių, o netelpantis žodis - viduje. Horizontalaus slinkimo nėra. */
.compact-match__info > div {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface);
  overflow-wrap: anywhere;
}

.compact-match__detail {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
}

/* Būsena - tekstinė žyma, ne mygtukas ir ne nukerpama eilutė. */
.compact-match__status {
  font-size: var(--font-label-large-size);
  font-weight: 600;
  color: var(--color-on-warning-container);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .compact-match {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-md);
    align-items: center;
  }

  .compact-match__date {
    white-space: nowrap;
  }

  .compact-match__status {
    text-align: right;
  }
}

/* -------------------------------------------------------------------- */
/* 15. Veiksmų mygtukai (action buttons) - index.html apačioje         */
/* -------------------------------------------------------------------- */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
}

@media (min-width: 768px) {
  .action-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 56px;
  padding: var(--space-md);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

@media (min-width: 768px) {
  .action-button {
    flex: 1 1 auto;
    min-width: 120px;
  }
}

.action-button:hover,
.action-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.action-button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.action-button__text {
  font-size: var(--font-body-medium-size);
  font-weight: 600;
  text-align: center;
}

/* -------------------------------------------------------------------- */
/* 16. Prioritetų sąrašai (arenos ir kortai, stumdomi drag & drop)      */
/*                                                                      */
/* Naudojama prioritetai.html: kairėje arenų, dešinėje pasirinktos       */
/* arenos KONKREČIŲ kortų eilė („SEB 02" su korto tipo žyme). Tempiama   */
/* už rankenos (pele arba pirštu), tvarką galima keisti ir ▲ / ▼.        */
/* -------------------------------------------------------------------- */
.prioritetu-stulpelis {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.prioritetu-sarasas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* display: flex nugalėtų [hidden] atributą, todėl paslėpimas nurodomas atskirai */
.prioritetu-sarasas[hidden] {
  display: none;
}

.prioritetu-elementas {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--touch-target-min);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  /* Ilgo paspaudimo metu naršyklė neturi žymėti teksto ar siūlyti meniu */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Paspausta ir laikoma - netrukus atsidarys arenos aikštelių sąrašas */
.prioritetu-elementas.is-pressing {
  background: var(--color-primary-container);
  border-color: var(--color-primary-light);
}

/* Tempiamas elementas */
.prioritetu-elementas.is-dragging {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

/* Arena, kurios aikštelės šiuo metu rodomos dešinėje */
.prioritetu-elementas.is-active {
  background: var(--color-primary-container);
  border-color: var(--color-primary);
}

.prioritetu-elementas__rankena {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  color: var(--color-on-surface-low);
  font-size: var(--font-title-large-size);
  line-height: var(--font-title-large-line-height);
  cursor: grab;
  /* Tempimas pirštu neturi slinkti puslapio */
  touch-action: none;
}

.prioritetu-elementas.is-dragging .prioritetu-elementas__rankena {
  cursor: grabbing;
}

.prioritetu-elementas__numeris {
  min-width: var(--space-lg);
  text-align: center;
  font-size: var(--font-label-large-size);
  font-weight: 600;
  color: var(--color-primary);
}

.prioritetu-elementas__pavadinimas {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-body-large-size);
  color: var(--color-on-surface);
  overflow-wrap: anywhere;
}

/* Korto tipas („Vidaus hard", „Kilimas") šalia korto pavadinimo */
.prioritetu-elementas__grupe {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}

.prioritetu-elementas__veiksmai {
  display: flex;
  gap: var(--space-xs);
}

.prioritetu-mygtukas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-on-surface-variant);
  font-size: var(--font-body-large-size);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.prioritetu-mygtukas:hover:not(:disabled) {
  background: var(--color-surface-variant);
  color: var(--color-on-surface);
}

.prioritetu-mygtukas:disabled {
  color: var(--color-outline-variant);
  cursor: default;
}

.prioritetu-mygtukas:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.prioritetu-uzuomina {
  font-size: var(--font-body-medium-size);
  color: var(--color-on-surface-variant);
}

/* -------------------------------------------------------------------- */
/* 10b. Testinės aplinkos juosta ir žyma                                 */
/* -------------------------------------------------------------------- */
/* Rodoma TIK testinėje aplinkoje (APLINKA=test). Juosta eina srauto
   viršuje (ne `fixed`), todėl neuždengia nei turinio, nei ryšio juostos.
   Be emoji - tik spalva ir lietuviškas žodis. */
.env-banner {
  padding: var(--space-sm) var(--space-md);
  padding-top: max(var(--space-sm), env(safe-area-inset-top));
  background: var(--color-warning-container);
  color: var(--color-on-warning-container);
  border-bottom: 2px solid var(--color-warning);
  text-align: center;
}

.env-banner__text {
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  font-weight: 600;
  margin: 0;
}

/* -------------------------------------------------------------------- */
/* 11. Ryšio indikatorius — connection status bar                        */
/* -------------------------------------------------------------------- */
/* Juosta rami: ji tik atsiranda ir dingsta švelniu perėjimu (be slinkimo, be
   mirksėjimo, be pasikartojančių animacijų). Matomumą valdo `.is-visible`, o ne
   `hidden` atributas - kitaip `display: none` nutrauktų perėjimą. */
.connection-status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: var(--space-md);
  background: var(--color-error-container);
  color: var(--color-on-error-container);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.connection-status-bar.is-visible {
  opacity: 1;
  visibility: visible;
}

.connection-status-bar__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.connection-status-bar__text {
  flex: 1 1 auto;
  font-size: var(--font-body-medium-size);
  font-weight: 500;
  min-width: 200px;
}

.connection-status-bar__retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  color: inherit;
  font-size: var(--font-label-large-size);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.connection-status-bar__retry:hover {
  background: rgba(255, 255, 255, 0.3);
}

.connection-status-bar__retry:active {
  background: rgba(255, 255, 255, 0.4);
}

.connection-status-bar__retry:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ==========================================================================
   Vykdomų užduočių sąrašas (busena.html)
   Rodo Jira „ai-dev" užduotis su paskutiniu agento progreso komentaru. Komentaras
   yra kelių eilučių tekstas (pradžios planas, eiga, baigiamoji santrauka), todėl
   jis rodomas VISAS: eilutės išsaugomos (`pre-line`), ilgi keliai laužomi, jokio
   nukirpimo ar horizontalaus slinkimo.
   ========================================================================== */
.uzduociu-sarasas {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.uzduotis-eilute {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-left: 4px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  background: var(--color-surface-variant);
}

.uzduotis-eilute--laukia {
  border-left-color: var(--color-info);
}

.uzduotis-eilute--vykdoma {
  border-left-color: var(--color-warning);
}

.uzduotis-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.uzduotis-key {
  font-family: var(--font-family-mono);
  font-weight: 600;
  color: var(--color-on-surface-variant);
}

.uzduotis-summary {
  flex: 1;
  min-width: 200px;
  font-weight: 500;
  color: var(--color-on-surface);
  overflow-wrap: anywhere;
}

.uzduoties-komentaras {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-surface-container);
}

.uzduoties-komentaras .badge {
  align-self: flex-start;
}

.uzduoties-komentaras__tekstas {
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: var(--font-body-medium-size);
  line-height: var(--font-body-medium-line-height);
  color: var(--color-on-surface);
}

.uzduoties-komentaras__laikas {
  font-size: var(--font-label-large-size);
  line-height: var(--font-label-large-line-height);
  color: var(--color-on-surface-low);
}

.tuscias-sarasas {
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-on-surface-variant);
}

.atnaujinimo-indikatorius {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  font-size: var(--font-label-large-size);
  color: var(--color-on-surface-variant);
}

/* -------------------------------------------------------------------- */
/* Detalių sąrašas (rezervacijos.html detalių sluoksnis, KAN-182)        */
/* -------------------------------------------------------------------- */
/* Laukas + reikšmė poromis. Mobiliajame - viena po kitos (etiketė virš
   reikšmės), nuo 768px - viena eilutė su fiksuoto pločio etikete kairėje
   (ta pati kryptis, kaip formos laukų lygiavimas). Laukas, kurio portalas
   nedavė, čia neatsiranda - jį atrenka JS, ne CSS. */
.detail-list {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.detail-list__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-outline-variant);
}

.detail-list__row:first-child {
  padding-top: 0;
}

.detail-list__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-list__label {
  font-size: var(--font-label-large-size);
  line-height: var(--font-label-large-line-height);
  color: var(--color-on-surface-variant);
}

.detail-list__value {
  margin: 0;
  font-size: var(--font-body-large-size);
  line-height: var(--font-body-large-line-height);
  color: var(--color-on-surface);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .detail-list__row {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-md);
  }

  .detail-list__label {
    flex: 0 0 180px;
  }

  .detail-list__value {
    flex: 1;
  }
}

/* -------------------------------------------------------------------- */
/* Šaltinio spalvos juostelė (KAN-218)                                   */
/* -------------------------------------------------------------------- */
/* Kairysis ~4px kraštas varžybų (`.tournament-match`), turnyrų
   registracijos (`.tournament-registration`), rezervacijų
   (`.reservation-row`) ir srauto (`.feed-item`) kortelėse/eilutėse - žymi
   duomenų šaltinį (platformą arba areną). Token'ą kiekvienam šaltiniui
   priskiria config/rules/saltiniu_spalvos.yaml (vartotojas jo nekeičia);
   sąsaja (`agents/web/spalvos.py` per API) tik prideda atitinkamą klasę.
   Naujam šaltiniui spalvą pridėti reikia TIK konfigūracijoje, ne čia.
   Papildo esamą elemento rėmelį - turinio ir išdėstymo nekeičia.

   Šios taisyklės sąmoningai pridėtos faile PASKUTINĖS - kad `border-left`
   patikimai laimėtų prieš anksčiau apibrėžtus tos pačios specifiškumo
   elemento rėmelio šablonus (pvz. `.tournament-match`, `.reservation-row`).

   `.card-source--dual` - rezervacijai su suplanuotomis varžybomis: dvi
   lygiagrečios juostelės (arenos spalva + fiksuota savarankiškų varžybų
   spalva, `--source-color-violetine`) sluoksniuotu `box-shadow`, nes vienas
   elementas gali turėti tik vieną `border-left`. */
.card-source {
  border-left: var(--space-xs) solid transparent;
}

.card-source--melyna      { border-left-color: var(--source-color-melyna);      --card-source-color: var(--source-color-melyna); }
.card-source--indigo      { border-left-color: var(--source-color-indigo);      --card-source-color: var(--source-color-indigo); }
.card-source--turkio      { border-left-color: var(--source-color-turkio);      --card-source-color: var(--source-color-turkio); }
.card-source--violetine   { border-left-color: var(--source-color-violetine);   --card-source-color: var(--source-color-violetine); }
.card-source--rausva      { border-left-color: var(--source-color-rausva);      --card-source-color: var(--source-color-rausva); }
.card-source--raudona     { border-left-color: var(--source-color-raudona);     --card-source-color: var(--source-color-raudona); }
.card-source--oranzine    { border-left-color: var(--source-color-oranzine);    --card-source-color: var(--source-color-oranzine); }
.card-source--gelsva      { border-left-color: var(--source-color-gelsva);      --card-source-color: var(--source-color-gelsva); }
.card-source--zalia       { border-left-color: var(--source-color-zalia);       --card-source-color: var(--source-color-zalia); }
.card-source--smaragdine  { border-left-color: var(--source-color-smaragdine);  --card-source-color: var(--source-color-smaragdine); }

.card-source--dual {
  border-left: none;
  box-shadow:
    inset var(--space-xs) 0 0 0 var(--card-source-color, transparent),
    inset calc(var(--space-xs) * 2) 0 0 0 var(--source-color-violetine);
}

/* `.reservation-row` neturi savo horizontalaus padding'o (KAN-159 ilgo
   sąrašo eilutė) - juostelei atsiradus, tekstas prie jos priliptų be šio
   tarpo. Kitiems šaltinio juostelę gaunantiems elementams jo nereikia - jie
   jau turi pakankamą vidinį padding'ą. */
.reservation-row.card-source {
  padding-left: var(--space-sm);
}

.reservation-row-select.card-source {
  padding-left: var(--space-sm);
}

.platform-row.card-source,
.platform-form.card-source {
  padding-left: var(--space-sm);
}