/* Vizuál sladěný s https://courses.ujep.cz/ :
   tmavě modré pozadí #0E2A47, bílé zaoblené karty, font Poppins. */

:root {
  --navy: #0E2A47;
  --navy-light: #16406b;
  --text: #4a4a4a;
  --text-dark: #363636;
  --accent: #1d72b8;
  --card-radius: 12px;
}

* { box-sizing: border-box; }
/* rezervace místa pro svislý posuvník — logo v liště pak sedí na stejném
   místě jako na rozcestníku (bez „scrollbar jump" při přechodu) */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: var(--navy);
  color: var(--text);
  font-size: 15px;
}

/* --- skip-link: schovaný nad stránkou, objeví se při fokusu (Tab) --- */
.skip-link {
  position: absolute;
  left: .75rem; top: .75rem;
  z-index: 3000;
  transform: translateY(-300%);
  background: var(--navy);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: .85rem;
  white-space: nowrap;
}
.skip-link:focus { transform: none; }
/* cíl skoku nemá mít vlastní fokusový rámeček */
#main:focus { outline: none; }

/* --- hlavička: loga + název aplikace v jedné bílé liště --- */
.logobar { background: #fff; padding: .6rem 1rem; }
.logobar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
/* šířka 250 px odpovídá zobrazení na courses.ujep.cz;
   dodané soubory mají ochranné okraje již v sobě */
.logo-ujep, .logo-eu { width: 250px; height: auto; display: block; }
.logobar-right { display: flex; align-items: center; gap: .4rem; }
#lang-toggle {
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid #dbdbdb;
  border-radius: 9999px;
  padding: .3rem .8rem;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}
#lang-toggle:hover { background: #eef3f8; }
#help-toggle {
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  width: 2rem; height: 2rem;
  border: 1px solid #dbdbdb;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}
#help-toggle:hover { background: #eef3f8; }
/* tlačítko „domů" (zpět na rozcestník) — stejný vzhled jako ?, s ikonou */
#home-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border: 1px solid #dbdbdb;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  text-decoration: none;
}
#home-btn:hover { background: #eef3f8; }
#home-btn svg { width: 1.05rem; height: 1.05rem; display: block; }

/* --- nápověda --- */
#help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,42,71,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}
#help-overlay[hidden] { display: none; }
.help-box {
  position: relative;
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  width: min(620px, 94vw);
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.4rem 1.6rem;
}
.help-box h2 { margin: 0 0 .6rem; font-size: 1.15rem; color: var(--navy); }
.help-box h3 { margin: 1rem 0 .4rem; font-size: .95rem; color: var(--navy); }
.help-box p { margin: .4rem 0; font-size: .87rem; }
#help-close {
  position: absolute;
  top: .6rem; right: .8rem;
  border: none; background: none;
  font-size: 1.4rem; line-height: 1;
  color: #8a8a8a; cursor: pointer;
}
#help-close:hover { color: var(--navy); }
.help-keys { width: 100%; table-layout: fixed; }
.help-keys td { padding: .2rem .6rem .2rem 0; font-size: .85rem;
                overflow-wrap: break-word; }
.help-keys td:first-child { width: 6.5rem; }
kbd {
  display: inline-block;
  background: #f0f3f7;
  border: 1px solid #d5dde5;
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: .05rem .45rem;
  font-family: Consolas, monospace;
  font-size: .8rem;
  white-space: nowrap;
}
.brand { text-align: center; flex: 1; }
.brand h1 {
  margin: 0;
  color: var(--navy);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}
.subtitle { color: #636c76; font-size: .85rem; font-weight: 300; }
@media (max-width: 900px) {
  .logo-ujep, .logo-eu { width: 160px; }
  .brand { flex-basis: 100%; order: 3; }
  .logobar-inner { justify-content: center; }
  .brand h1 { font-size: 1.2rem; }
}

/* --- rozvržení --- */
.content { max-width: 1200px; margin: 0 auto; padding: 0 1rem 2rem; }

.card {
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  margin-top: 1rem;
}

/* --- filtry --- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1rem;
  padding: 1rem 1.2rem;
  align-items: flex-end;
}
.filter { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; }
.filter-wide { flex: 2 1 220px; }
.filter-reset { flex: 0 0 auto; }
/* na širších obrazovkách drží všechny filtry na jednom řádku
   (selecty se zúží; plný text položky je vidět po rozbalení) */
@media (min-width: 860px) {
  .filters { flex-wrap: nowrap; }
  .filter label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .filter select, .filter input { width: 100%; }
}
.filter label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: .25rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.filter select, .filter input {
  font-family: inherit;
  font-size: .9rem;
  color: var(--text-dark);
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  padding: .45rem .6rem;
  background: #fff;
}
/* výrazné odlišení aktivních a nulových (disabled) položek nabídek —
   výchozí šedá prohlížeče je málo kontrastní */
.filter select option { color: #2b2b2b; }
.filter select option:disabled { color: #9aa2ab; font-style: italic; }
.filter select:focus, .filter input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
#f-reset {
  font-family: inherit;
  font-size: .85rem;
  border: none;
  border-radius: 9999px;
  padding: .5rem 1.1rem;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
}
#f-reset:hover { background: var(--navy-light); }

/* --- počty --- */
.counts {
  padding: .55rem 1.2rem;
  font-size: .85rem;
  color: var(--text-dark);
}

/* --- mapa --- */
.map-card { overflow: hidden; }
#map { height: 520px; }
.leaflet-popup-content { font-family: 'Poppins', sans-serif; font-size: .85rem; }
.popup-name { font-weight: 600; font-size: .95rem; margin-bottom: .15rem; }
.popup-name a { color: var(--accent); text-decoration: none; }
.popup-name a:hover { text-decoration: underline; }
.popup-meta { color: #636c76; margin-bottom: .4rem; }
.popup-contract { margin: .25rem 0 0; padding-top: .25rem; border-top: 1px solid #eee; }
.popup-fac { font-weight: 600; }

/* --- tabulka --- */
.table-card { padding: .4rem 0; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
/* pevné rozvržení sloupců hlavní tabulky (#tbl): instituce a obory
   dostávají nejvíc místa, obsah buněk se zalamuje */
#tbl { table-layout: fixed; min-width: 760px; }
#tbl th:nth-child(1) { width: 26%; }  /* vysoká škola */
#tbl th:nth-child(2) { width: 11%; }  /* erasmus kód */
#tbl th:nth-child(3) { width: 11%; }  /* město */
#tbl th:nth-child(4) { width: 12%; }  /* stát */
#tbl th:nth-child(5) { width: 15%; }  /* fakulta / pracoviště */
#tbl th:nth-child(6) { width: 25%; }  /* obory */
#tbl td { overflow-wrap: break-word; }
th, td {
  text-align: left;
  padding: .55rem .9rem;
  font-size: .85rem;
  vertical-align: top;
}
thead th {
  position: sticky; top: 0;
  background: #fff;
  color: var(--text-dark);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 2px solid var(--navy);
  white-space: nowrap;
}
th[data-sort] { cursor: pointer; }
th[data-sort]:hover { color: var(--accent); }
th .arrow { font-size: .7em; }
tbody tr { border-bottom: 1px solid #f0f0f0; cursor: pointer; }
tbody tr:hover { background: #f4f8fc; }
/* zvýraznění řádku po kliknutí na značku v mapě (mapa -> tabulka):
   ~40 % času plná barva, pak pozvolné doznění; celkovou délku určuje
   config.rowFlashSeconds (app.js ji nastavuje do --row-flash) */
tbody tr.flash { animation: rowflash var(--row-flash, 4.5s) ease-out; }
@keyframes rowflash {
  0%, 40% { background: #ffedb0; }
  100%    { background: transparent; }
}
tbody tr.no-coords { cursor: default; }
/* odkazy podtržené i v klidu, ať je na první pohled zřejmé,
   že je web školy proklikávací */
td a { color: var(--accent); text-decoration: underline;
       text-decoration-color: rgba(29,114,184,.35); text-underline-offset: 2px; }
td a:hover { text-decoration-color: var(--accent); }
.leaflet-popup-content a { text-decoration: underline; text-underline-offset: 2px; }
.tag {
  display: inline-block;
  background: #eef3f8;
  color: var(--navy);
  border-radius: 6px;
  padding: .05rem .45rem;
  margin: .07rem .15rem .07rem 0;
  font-size: .78rem;
  /* dlouhé názvy oborů se smí zalomit uvnitř štítku,
     jinak by přetékaly ze sloupce */
  white-space: normal;
  overflow-wrap: break-word;
}

/* Fakultní barvy dle grafického manuálu JVS UJEP (pruhy loga
   zleva doprava; hex kódy z tabulky PANTONE/Hexacode manuálu):
   FSI šedá 666666, FŽP zelená 67AF23, FUD žlutá FBBE00,
   FF oranžová EB690A, FZS červená D20019, PRF petrolejová 007381,
   PF růžová E53188, FSE modrá 0095CF.
   Barva textu volena dle kontrastu WCAG AA (≥ 4,5:1): na tmavých
   podkladech (FSI, FZS, PRF) bílá, na světlejších tmavá. */
.tag.fac-FSI { background: #666666; color: #fff; }
.tag.fac-FŽP { background: #67AF23; color: #1e2b12; }
.tag.fac-FUD { background: #FBBE00; color: #2b2405; }
.tag.fac-FF  { background: #EB690A; color: #2b1503; }
.tag.fac-FZS { background: #D20019; color: #fff; }
.tag.fac-PRF { background: #007381; color: #fff; }
.tag.fac-PF  { background: #E53188; color: #2b0a1c; }
.tag.fac-FSE { background: #0095CF; color: #10222b; }

/* --- lišta nad tabulkou: fulltext + stránkování --- */
.table-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  font-size: .82rem;
  flex-wrap: wrap;
  border-bottom: 1px solid #f0f0f0;
}
#t-search {
  font-family: inherit;
  font-size: .85rem;
  color: var(--text-dark);
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  padding: .4rem .6rem;
  flex: 1 1 200px;
  max-width: 340px;
  min-width: 0;
}
#t-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.table-bar button {
  font-family: inherit;
  font-size: .8rem;
  border: 1px solid #dbdbdb;
  border-radius: 9999px;
  padding: .3rem .9rem;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}
.table-bar button:hover:not(:disabled) { background: #eef3f8; }
.table-bar button:disabled { color: #b5b5b5; cursor: default; }
.table-bar select {
  font-family: inherit;
  font-size: .8rem;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  padding: .25rem .4rem;
}
.table-bar .page-info { white-space: nowrap; }
.table-bar .page-label { color: #68717c; margin-left: auto; white-space: nowrap; }

/* --- patička --- */
.foot {
  color: rgba(255,255,255,.6);
  font-size: .78rem;
  text-align: center;
  padding: 1.2rem 0 .4rem;
  font-weight: 300;
}
.foot a { color: rgba(255,255,255,.85); }

@media (max-width: 700px) {
  #map { height: 380px; }
  .brand { font-size: 1.25rem; }
}

/* --- přístupnost --- */
/* viditelný fokus pro prvky ovládané klávesnicí (řazení, řádky) */
th[data-sort]:focus-visible, tbody tr:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* respektovat systémové omezení animací */
@media (prefers-reduced-motion: reduce) {
  tbody tr.flash { animation: none; background: #ffedb0; }
  * { scroll-behavior: auto !important; }
}