/* ============================================================================
   PSL DESIGN SYSTEM
   assets/css/psl-system.css

   Jeden systém, štyri témy. Tento súbor definuje SPRÁVANIE a ŠTRUKTÚRU
   komponentov; téma dodáva iba materiál - farbu, tvar, typografiu.

   Pravidlo: tu nie je ani jedna natvrdo zapísaná farba. Všetko ide cez
   tokeny, takže téma zmení vzhľad bez toho, aby prepisovala komponenty.

   Poradie načítania: systém -> tokeny témy -> CSS témy.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. ŠKÁLY
   Rozostupy sledujú modulárnu škálu 1.5. Zámerne ich je málo - sedem hodnôt
   pokryje celý web a rozhodovanie je rýchle. Typografia používa clamp(),
   takže medzi mobilom a desktopom nie sú skoky.
   --------------------------------------------------------------------------- */
:root {
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2.25rem;
  --s-7: 3.5rem;

  --measure: 68ch;          /* maximálna dĺžka riadku pre súvislý text */
  --tap: 44px;              /* minimálny dotykový cieľ */

  --dur-fast: 90ms;
  --dur: 150ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

/* ---------------------------------------------------------------------------
   2. ZÁKLAD
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--page-bg);
  color: var(--text-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Čísla sa musia dať porovnávať pohľadom v stĺpci */
.tabular, .player-count, .stat, .server-stats, .badge,
td, th, time, .stat-value { font-variant-numeric: tabular-nums; }

p, li { max-width: var(--measure); }
.lead { max-width: var(--measure); }

/* Fokus je jeden a ten istý v celom systéme - používateľ ho spozná */
:focus-visible {
  outline: 2px solid var(--focus, var(--primary-color));
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Preskočenie na obsah - prvý prvok v tab poradí */
.skip-to-content {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: var(--s-2) var(--s-4);
  background: var(--primary-color); color: #fff; font-weight: 600;
}
.skip-to-content:focus { left: 0; }

/* ---------------------------------------------------------------------------
   3. STAVOVÉ INDIKÁTORY
   Stav servera je najdôležitejšia informácia na celom webe. Nesmie ho niesť
   iba farba - farbosleposť aj monochromatické displeje musia stav rozoznať.
   Preto: farba + tvar + text.
   --------------------------------------------------------------------------- */
.server-status {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
}
.status-dot {
  width: 8px; height: 8px; flex: 0 0 8px;
  background: var(--muted-color, currentColor);
}
.server-status.online  .status-dot { background: var(--ok-color); border-radius: 50%; }
.server-status.offline .status-dot {
  background: transparent;
  border: 2px solid var(--down-color);
  border-radius: 50%;
}
.server-status.online  .status-text { color: var(--ok-color); }
.server-status.offline .status-text { color: var(--down-color); }

/* Pulz iba pri živom stave a iba ak používateľ pohyb neodmietol */
@media (prefers-reduced-motion: no-preference) {
  .server-status.online .status-dot { animation: psl-pulse 2.4s var(--ease) infinite; }
  @keyframes psl-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--ok-soft); }
    50%      { box-shadow: 0 0 0 4px transparent; }
  }
}

/* ---------------------------------------------------------------------------
   4. TLAČIDLÁ
   Tri úrovne dôležitosti, nič viac. Každá obrazovka má mať najviac jednu
   primárnu akciu.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  font-weight: 600; line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn-sm { min-height: 34px; padding: var(--s-1) var(--s-3); font-size: .8125rem; }
.btn:disabled, .btn.is-loading { opacity: .55; pointer-events: none; }

.btn-primary   { background: var(--primary-color); border-color: var(--primary-color); color: var(--on-primary, #fff); }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-outline-primary { background: transparent; border-color: var(--primary-color); color: var(--primary-color); }
.btn-outline-primary:hover { background: var(--primary-color); color: var(--on-primary, #fff); }
.btn-secondary, .btn-outline-light {
  background: var(--surface-2); border-color: var(--surface-border); color: var(--text-body);
}
.btn-secondary:hover, .btn-outline-light:hover { border-color: var(--text-soft); }
.btn-success { background: var(--ok-color); border-color: var(--ok-color); color: var(--on-primary, #fff); }

/* Stav načítania priamo v tlačidle - žiadny globálny spinner cez pol obrazovky */
.btn.is-loading::before {
  content: ''; width: 14px; height: 14px; flex: 0 0 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: psl-spin .7s linear infinite;
}
@keyframes psl-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   5. ODKAZY
   V súvislom texte podčiarknuté, v navigácii a zoznamoch nie - inak by
   rozhranie vyzeralo ako mapa metra.
   --------------------------------------------------------------------------- */
a { color: var(--link-color, var(--primary-color)); text-decoration: none; }
a:hover { color: var(--primary-hover); }
p a, .prose a, .footer-disclaimer a {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------------------------
   6. ODZNAKY
   --------------------------------------------------------------------------- */
.badge, .server-type-badge {
  display: inline-flex; align-items: center;
  padding: .2em .55em;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--surface-alt); color: var(--text-soft);
  border: 1px solid var(--surface-border);
}
.badge.bg-primary { background: var(--primary-color); color: var(--on-primary, #fff); border-color: transparent; }
.badge.bg-success { background: var(--ok-color); color: var(--on-primary, #fff); border-color: transparent; }
.badge.bg-danger  { background: var(--down-color); color: #fff; border-color: transparent; }

/* ---------------------------------------------------------------------------
   7. FORMULÁRE
   --------------------------------------------------------------------------- */
.form-label {
  display: block; margin-bottom: var(--s-1);
  font-size: .8125rem; font-weight: 600; color: var(--text-soft);
}
.form-control, .form-select {
  width: 100%; min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  transition: border-color var(--dur) var(--ease);
}
.form-control::placeholder { color: var(--text-soft); opacity: .7; }
.form-control:focus, .form-select:focus {
  border-color: var(--primary-color);
  background: var(--surface);
  color: var(--text-body);
  outline: 2px solid var(--focus, var(--primary-color));
  outline-offset: 1px;
}
.form-control[aria-invalid="true"] { border-color: var(--down-color); }
.form-hint  { font-size: .78rem; color: var(--text-soft); margin-top: var(--s-1); }
.form-error { font-size: .78rem; color: var(--down-color); margin-top: var(--s-1); font-weight: 600; }

/* ---------------------------------------------------------------------------
   8. UPOZORNENIA
   Farebná hrana vľavo, nie plocha - text zostáva čitateľný v každej téme.
   --------------------------------------------------------------------------- */
.alert {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--text-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text-body);
}
.alert-info    { border-left-color: var(--primary-color); }
.alert-success { border-left-color: var(--ok-color); }
.alert-warning { border-left-color: var(--warn-color); }
.alert-danger  { border-left-color: var(--down-color); }

/* ---------------------------------------------------------------------------
   9. TABUĽKY
   --------------------------------------------------------------------------- */
.table { width: 100%; color: var(--text-body); border-collapse: collapse; }
.table th {
  text-align: left;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-soft); font-weight: 700;
  padding: var(--s-2) var(--s-3);
  border-bottom: 2px solid var(--surface-border);
}
.table td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--surface-border);
}
.table tbody tr:hover td { background: var(--surface-alt); }
/* Na mobile sa tabuľka posúva vodorovne, nerozpadá sa */
@media (max-width: 767.98px) {
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------------------
   10. STRÁNKOVANIE
   --------------------------------------------------------------------------- */
.page-item .page-link {
  min-width: var(--tap); min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text-body);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.page-item.active .page-link {
  background: var(--primary-color); border-color: var(--primary-color);
  color: var(--on-primary, #fff);
}
.page-item.disabled .page-link { opacity: .4; pointer-events: none; }

/* ---------------------------------------------------------------------------
   11. MODÁLY A TOOLTIPY
   --------------------------------------------------------------------------- */
.modal-content {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  color: var(--text-body);
}
.modal-header, .modal-footer { border-color: var(--surface-border); }

/* Tooltip bez JavaScriptu - stačí data-tip */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; z-index: 40;
  padding: var(--s-1) var(--s-2);
  font-size: .72rem; font-weight: 600;
  background: var(--text-strong); color: var(--page-bg);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   12. STAVY: NAČÍTAVANIE, PRÁZDNO, CHYBA
   Prázdny stav nie je chyba - je to pozvánka. Vždy nesie ďalší krok.
   --------------------------------------------------------------------------- */
.skeleton {
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  min-height: 1em;
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: psl-fade 1.4s var(--ease) infinite; }
  @keyframes psl-fade { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
}

.state-empty, .state-error {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  border: 1px dashed var(--surface-border);
  border-radius: var(--radius-md);
  color: var(--text-soft);
}
.state-empty__title, .state-error__title {
  color: var(--text-strong); font-weight: 700; margin-bottom: var(--s-2);
}
.state-error { border-style: solid; border-left: 3px solid var(--down-color); text-align: left; }

/* ---------------------------------------------------------------------------
   13. VÝKON
   content-visibility nechá prehliadač preskočiť layout a paint pre riadky
   mimo obrazovky. Pri zozname dvesto serverov je to najväčší jednotlivý
   zisk, aký sa dá dosiahnuť čistým CSS.
   --------------------------------------------------------------------------- */
.unified-server-card, .server-row, .glossary-term, .card.server-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}
img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   14. PÄTIČKA
   --------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-2);
  color: var(--text-body);
  border-top: 1px solid var(--surface-border);
}
.site-footer .footer-title { color: var(--text-strong); font-weight: 700; font-size: 1rem; }
.site-footer .footer-text  { color: var(--text-soft); }
.site-footer .footer-link  { color: var(--text-soft); transition: color var(--dur) var(--ease); }
.site-footer .footer-link:hover, .site-footer .footer-link:focus {
  color: var(--primary-color); text-decoration: underline;
}
.site-footer .footer-rule { border: 0; border-top: 1px solid var(--surface-border); opacity: 1; }
.site-footer .footer-disclaimer {
  color: var(--text-soft);
  background: var(--surface-alt);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4);
  font-size: .78rem; line-height: 1.6;
  max-width: 100ch; margin: 0 auto;
}
.site-footer .footer-games { columns: 2; column-gap: var(--s-6); }
.site-footer .footer-games li { break-inside: avoid; }
.site-footer ul.list-unstyled li { margin-bottom: var(--s-1); font-size: .9rem; }
@media (max-width: 575.98px) {
  .site-footer .footer-games { columns: 1; }
}