/* Pismo Source Sans 3 je primo v aplikaci (slozka public/fonts), prohlizec ho tedy nestahuje
   z cizich serveru. Je to "variabilni" pismo: jeden soubor obsahuje vsechny tloustky (200-900).
   Soubory jsou podle znaku dvoji (zakladni latinka a rozsirena latinka s ceskymi c, r, z...),
   kazdy v normalni a kurzivni variante;
   prohlizec si podle unicode-range stahne jen ty, ktere stranka potrebuje.
   Licence pisma (SIL Open Font License) je v public/fonts/LICENSE-source-sans-3.txt. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-ext-wght-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Barvy a stiny cele aplikace na jednom miste */
:root {
  --ink: #1c2833;
  --muted: #687582;
  --line: #d8dde2;
  --background: #f2f4f6;
  --surface: #ffffff;
  --surface-muted: #eceff2;     /* sede pozadi: vikend, radek soucasti, stitek "jen ke cteni" */
  --accent: #0065bd;
  --accent-soft: #e1ecf8;
  --danger: #b3261e;
  --danger-soft: #fbe3e1;       /* svetle cervene pozadi: svatek, zablokovano, najeti na kos */
  --danger-line: #f0c2bd;       /* ramecek na svetle cervenem pozadi */
  --success: #2e9d4f;           /* zelena: aktivni obdobi, tlacitko + */
  --warning-ink: #6b4700;       /* hnedy text upozorneni */
  --warning-soft: #fff1d6;      /* svetle zlute pozadi upozorneni */
  --warning-line: #e0a100;      /* oranzovy pruh vlevo u upozorneni */
  --unavailable-ink: #9c1f17;   /* dostupnost: nemuze */
  --unavailable-soft: #f3c9c5;
  --preferred-ink: #1f6b2e;     /* dostupnost: preferuje */
  --preferred-soft: #cfe9d3;
  --header-text: #c9d6e3;       /* svetly text na tmave liste a v paticce */
  --footer-muted: #8fa1b3;      /* tlumeny text v paticce */
  --shadow-popup: 0 6px 18px rgba(28, 40, 51, 0.15);  /* nabidky pod polickem, filtr */
  --shadow-large: 0 10px 40px rgba(28, 40, 51, 0.25); /* dialogy, karta prihlaseni */
  /* Vyska horni listy. Skutecnou vysku sem po nacteni stranky zapise js/common.js
     (lista muze byt na uzkem displeji vyssi); tohle je jen vychozi odhad. */
  --header-height: 4.5rem;
}

* {
  box-sizing: border-box;
}

/* Prvek s atributem hidden je vzdy skryty, i kdyz mu jine pravidlo nastavuje display
   (napr. display: flex). Diky tomu neni potreba psat [hidden] u kazde tridy zvlast. */
[hidden] {
  display: none !important;
}

/* Pri skoku na misto stranky (odkaz s #, scrollIntoView) nezajede cil pod pevnou horni listu */
html {
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--background);
}

/* Horni lista s nazvem aplikace a navigaci. Je pevna: pri posouvani stranky zustava nahore
   (z-index ji drzi nad obsahem stranky, ale pod nabidkami filtru a dialogy). */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 2rem;
  background: var(--ink);
  color: #fff;
}

.app-header h1 {
  margin: 0;
  font-size: 1.25rem;
}

/* Nazev aplikace: bily ctverecek s pismenem "e" a vedle nazev (stejne jako na uvodni strance) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  background: #fff;
  border-radius: 0.35rem;
}

.app-header nav {
  display: flex;
  gap: 1.25rem;
}

.app-header nav a {
  color: var(--header-text);
  text-decoration: none;
}

.app-header nav a.current {
  color: #fff;
  border-bottom: 2px solid #7fb6ea;
}

/* Vpravo v horni liste: kdo je prihlaseny a tlacitko Odhlasit (doplni js/common.js) */
.account {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-left: auto;
  font-size: 0.9375rem;
}

.account-name {
  font-weight: 600;
}

.account a {
  color: var(--header-text);
}

/* Upozorneni pro hosta, ze pracuje s ukazkovymi daty */
.guest-badge {
  padding: 0.1rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--warning-ink);
  background: #ffd98a;
  border-radius: 1rem;
}

/* Tlacitko Odhlasit (velikost dava trida small) */
.app-header button.logout-button {
  color: #fff;
  background: transparent;
  border-color: #5d6d7c;
}

.app-header button.logout-button:hover {
  border-color: #fff;
}

/* ---------------------------------------------------------------------------
   Rozlozeni stranek
   --------------------------------------------------------------------------- */

/* Stranka se seznamem vlevo a formularem vpravo (Lide, Soucasti, Specializace) */
.layout {
  display: grid;
  grid-template-columns: 1fr 32rem;
  gap: 2rem;
  align-items: start;
  max-width: 100rem;
  margin: 0 auto;
  padding: 2rem;
}

/* Stranka bez panelu vpravo (napr. Soucasti u spravce katedry): seznam na celou sirku */
.layout.no-panel {
  grid-template-columns: 1fr;
}

/* Stranka Lide ma hodne sloupcu: uzsi panel vpravo, aby zbylo dost mista pro jmeno */
.layout.people-layout {
  grid-template-columns: 1fr 28rem;
}

/* Stranka bez panelu vpravo (Kalendar, Dostupnost): obsah pres celou sirku okna */
.page {
  padding: 1.5rem 2rem;
}

/* Uzsi stranka uprostred okna (Historie, Audit log); maximalni sirku urcuje CSS stranky */
.page.centered {
  margin: 0 auto;
  padding: 2rem;
}

h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.count,
.empty {
  color: var(--muted);
  font-weight: 400;
}

/* Sedy vysvetlujici text pod nadpisem nebo ve formulari. Jednotlive stranky mu mohou
   zmenit okraje nebo maximalni sirku. */
.hint {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.muted {
  font-size: 0.875rem;
  color: var(--muted);
}

.error {
  font-weight: 600;
  color: var(--danger);
}

/* ---------------------------------------------------------------------------
   Tabulky
   --------------------------------------------------------------------------- */

/* Tabulka: pevne rozlozeni, sloupec bez sirky dostane zbyvajici misto */
.list {
  overflow-x: auto;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
}

th {
  padding: 0.4rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

/* Kazdy radek na jeden radek: co se nevejde, nahradi tri tecky */
td {
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--line);
}

/* Pevne sirky sloupcu */
.col-specializations {
  width: 7rem;
}

.col-email {
  width: 15rem;
}

.col-count {
  width: 6rem;
  text-align: right;
}

.col-actions {
  width: 5rem;
}

.col-department {
  width: 6.5rem;
}

/* Sloupec Clen na strance Lide: interni / externi */
.col-member {
  width: 6rem;
}

td.number {
  text-align: right;
}

/* Jmeno: tituly mene vyrazne, prijmeni tucne, poznamka sede za jmenem */
.name .title {
  font-size: 0.875rem;
  color: var(--muted);
}

.name .surname {
  font-weight: 700;
}

.name .note {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--muted);
}

/* Neaktivni lide jsou zasednuti (v tabulce krome tlacitek, v seznamu lidi katedry cely radek) */
tr.inactive td:not(.actions),
.detail-people li.inactive {
  opacity: 0.45;
}

/* Bunka s tlacitky se nikdy neorezava */
td.actions {
  overflow: visible;
  text-overflow: clip;
  padding-right: 0.5rem;
  text-align: right;
}

/* Vybiraci tabulka: radek pod mysi je podbarveny, vybrany radek zvyrazneny */
table.selectable tbody tr {
  cursor: pointer;
}

table.selectable tbody tr:hover td {
  background: #eef3f8;
}

table.selectable tbody tr.selected td {
  background: var(--accent-soft);
}

table.selectable tbody tr.selected td:first-child {
  box-shadow: inset 4px 0 0 var(--accent);
}

/* Zahlavi sloupce, podle ktereho jde radit; sipka ukazuje smer razeni */
th.sortable {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  color: var(--ink);
}

th.sorted-asc::after {
  content: ' ▲';
  font-size: 0.7em;
}

th.sorted-desc::after {
  content: ' ▼';
  font-size: 0.7em;
}

/* Nadpis seznamu s tlacitky pro pridani vpravo */
.list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.list-header-buttons {
  display: flex;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Stitky
   --------------------------------------------------------------------------- */

/* Stitek se zkratkou (specializace, katedra) */
.chip {
  display: inline-block;
  min-width: 1.75rem;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0 0.4rem;
  text-align: center;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 0.25rem;
}

/* Barevny stitek katedry: barvu pozadi i textu nastavuje JavaScript podle katedry */
.chip.department-chip {
  min-width: 2.75rem;
}

/* Vic stitku kateder v jedne bunce tabulky */
td.department-chips {
  white-space: normal;
}

td.department-chips .department-chip + .department-chip {
  margin-left: 0.2rem;
}

/* Maly stitek za jmenem nebo nazvem. Barvy urcuje druha trida:
   external-badge (externi clen), role-badge (spravce), blocked-badge (zablokovana katedra) */
.badge {
  margin-left: 0.4rem;
  padding: 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.25rem;
}

.external-badge {
  color: var(--warning-ink);
  background: var(--warning-soft);
}

.role-badge {
  color: var(--accent);
  background: var(--accent-soft);
}

.blocked-badge {
  color: var(--danger);
  background: var(--danger-soft);
}

/* Puntik stavu obdobi (Kalendar, Historie): zeleny aktivni, sedy neaktivni, cerveny zruseny */
.status-dot {
  display: inline-block;
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  vertical-align: middle;
}

.status-dot.active {
  background: var(--success);
}

.status-dot.inactive {
  background: #9aa5b1;
}

.status-dot.cancelled {
  background: var(--danger);
}

/* Zlute upozorneni s oranzovym pruhem vlevo (docasne heslo, zamcene udaje, navrh textu).
   Okraje a odsazeni urcuje druha trida. */
.note-box {
  background: var(--warning-soft);
  border-left: 4px solid var(--warning-line);
}

/* ---------------------------------------------------------------------------
   Tlacitka
   --------------------------------------------------------------------------- */

button {
  padding: 0.4rem 0.9rem;
  font: inherit;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0.25rem;
  cursor: pointer;
}

button.secondary {
  color: var(--accent);
  background: transparent;
}

button.danger {
  color: var(--danger);
  background: transparent;
  border-color: transparent;
}

/* Mensi tlacitko (v hlavicce seznamu, v radku tabulky, v horni liste) */
button.small {
  padding: 0.2rem 0.75rem;
  font-size: 0.875rem;
}

.buttons {
  display: flex;
  gap: 0.5rem;
}

.buttons + .buttons {
  margin-top: 0.5rem;
}

/* Tlacitka s ikonou (tuzka, kos) na konci radku */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}

.icon-button + .icon-button {
  margin-left: 0.15rem;
}

.icon-button.edit:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.icon-button.delete:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

/* ---------------------------------------------------------------------------
   Panel s formularem vpravo
   --------------------------------------------------------------------------- */

/* Panel s formularem zustava pri posouvani stranky na ocich (pod horni listou). Je nejvys tak
   vysoky jako zbytek okna pod listou; kdyz se do nej obsah (napr. dlouhy formular) nevejde,
   posouva se uvnitr panelu.
   Odsazeni od listy (top) je stejne jako horni okraj rozlozeni .layout (padding 2rem): panel tak
   stoji uz od nacteni presne tam, kde se pri posouvani zastavi, a vubec se nepohne.
   Pri zmene paddingu v .layout je potreba zmenit i tato dve cisla. */
.panel {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  max-height: calc(100vh - var(--header-height) - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
}

/* Napoveda ve formularich v panelu vpravo je bliz k predchozimu poli */
.panel .hint {
  margin: -0.25rem 0 0.75rem;
}

/* Uzky displej: seznam a panel pod sebou, odsazeni mensi.
   (Musi byt az za pravidly .layout, .page a .panel, jinak by je ta pozdejsi prepsala.) */
@media (max-width: 900px) {
  .layout,
  .layout.people-layout {
    grid-template-columns: 1fr;
  }

  .layout,
  .page.centered {
    padding: 1rem;
  }

  /* Tabulka na uzke strance se nesnazi drzet pevne sirky sloupcu */
  .page.centered table {
    table-layout: auto;
  }

  /* Panel je pod seznamem: nelepi se a posouva se s celou strankou */
  .panel {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* ---------------------------------------------------------------------------
   Formulare
   --------------------------------------------------------------------------- */

label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Pole, ktere neni jedno policko (napr. vyber specializaci nebo prepinac typu clena):
   popisek vypada jako u label */
.field,
.field-block {
  margin-bottom: 0.75rem;
}

.field-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.field-hint {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Textova policka i rozbalovaci seznamy vypadaji stejne */
input,
select,
textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.45rem 0.6rem;
  font: inherit;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0.25rem;
}

select {
  background: var(--surface);
}

/* Modry obrys pole, ve kterem je kurzor (u vyberu specializaci obrys celeho ramecku) */
input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.specialization-box:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Prepinac, ktery je skryty a klika se misto nej na popisek
   (barevny ctverecek katedry, dvojice tlacitek interni / externi) */
label.color-option input,
.segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* Radek se jmenem: titul pred, jmeno, prijmeni, titul za */
.name-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr 1fr 5rem;
  gap: 0.5rem;
}

@media (max-width: 480px) {
  .name-row {
    grid-template-columns: 1fr 1fr;
  }
}

fieldset {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
}

legend {
  padding: 0 0.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

/* Zaskrtavaci policka s popiskem vedle sebe */
label.option,
label.checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  color: var(--ink);
}

label.option {
  margin: 0;
}

label.option input,
label.checkbox input {
  width: auto;
  margin: 0;
}

/* Zablokovana katedra v nabidce kateder externisty (formular cloveka) */
label.option.blocked {
  color: var(--muted);
  text-decoration: line-through;
}

/* Doplnovani: sedy stin lezi pod pruhlednym polickem a kopiruje jeho pismo i odsazeni */
.autocomplete {
  position: relative;
  margin-top: 0.25rem;
  background: var(--surface);
  border-radius: 0.25rem;
}

.autocomplete input {
  position: relative;
  margin-top: 0;
  background: transparent;
}

.autocomplete-ghost {
  position: absolute;
  inset: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid transparent;
  font: inherit;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
}

.autocomplete-typed {
  color: transparent;
}

.autocomplete-rest {
  color: #a3acb5;
}

/* Vyber barvy katedry: radek barevnych ctverecku (samotny prepinac je skryty, viz vyse) */
.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

label.color-option {
  margin: 0;
  cursor: pointer;
}

.color-swatch {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--surface);
  border-radius: 0.25rem;
  box-shadow: 0 0 0 1px var(--line);
}

/* Vybrana barva ma vyrazny ramecek */
label.color-option input:checked + .color-swatch {
  box-shadow: 0 0 0 2px var(--ink);
}

label.color-option input:focus-visible + .color-swatch {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Prepinac typu clena: dve tlacitka vedle sebe, vybrane je vyplnene
   (samotny prepinac je skryty, viz vyse) */
.segmented {
  display: inline-flex;
  border: 1px solid var(--accent);
  border-radius: 0.25rem;
  overflow: hidden;
}

.segmented label {
  margin: 0;
  cursor: pointer;
}

.segmented span {
  display: block;
  padding: 0.3rem 1.1rem;
  font-size: 0.9375rem;
  color: var(--accent);
}

.segmented label + label span {
  border-left: 1px solid var(--accent);
}

.segmented input:checked + span {
  color: #fff;
  background: var(--accent);
}

.segmented input:disabled + span {
  opacity: 0.5;
  cursor: not-allowed;
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}

/* ---------------------------------------------------------------------------
   Dialogy (Kalendar, Historie)
   --------------------------------------------------------------------------- */

/* Dialog: modry pruh nahore, kompaktni, aby se vesel na vysku obrazovky bez posuvniku */
dialog {
  width: min(31rem, 95vw);
  padding: 0.9rem 1.25rem;
  border: none;
  border-top: 4px solid var(--accent);
  box-shadow: var(--shadow-large);
}

dialog::backdrop {
  background: rgba(28, 40, 51, 0.45);
}

dialog h2 {
  margin: 0 0 0.6rem;
  font-size: 1.125rem;
}

/* Tlacitka dole v dialogu; .spacer mezi nimi odsune nasledujici tlacitka doprava */
.dialog-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spacer {
  flex: 1;
}

/* ---------------------------------------------------------------------------
   Detail vybraneho cloveka nebo katedry (panel vpravo)
   --------------------------------------------------------------------------- */

/* Informace o vybranem cloveku nebo katedre: popisky vlevo, hodnoty vpravo */
.detail-list {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.4rem 1rem;
  margin: 0 0 1rem;
}

.detail-list dt {
  font-size: 0.875rem;
  color: var(--muted);
}

.detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.detail-list dd .chip {
  margin-bottom: 0;
}

.detail-subtitle {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
}

.detail-subtitle:empty {
  display: none;
}

/* Seznam lidi katedry ve dvou sloupcich (radi se po radcich), pri velkem poctu se posouva */
.detail-people {
  max-height: 24rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
  font-size: 0.9375rem;
}

/* ---------------------------------------------------------------------------
   Vyber cloveka z databaze (public/js/person-picker.js)
   --------------------------------------------------------------------------- */

.person-picker {
  position: relative;
}

.person-picker input {
  margin-top: 0;
}

/* Vyplnene policko nema ramecek ani pozadi; ramecek se ukaze pod mysi a pri psani */
.person-picker.filled input {
  border-color: transparent;
  background: transparent;
}

.person-picker.filled input:hover,
.person-picker.filled input:focus {
  border-color: var(--ink);
}

/* Clovek nalezeny v databazi: vypada jako stitek katedry (pozadi v barve katedry) */
.person-picker.matched input {
  padding-right: 3.25rem;
  font-weight: 600;
  color: var(--person-text);
  background: var(--person-color);
}

/* Cislo katedry uvnitr policka vpravo */
.picker-chip {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--person-text);
  opacity: 0.85;
  pointer-events: none;
}

/* Seznam navrhu pod polickem */
.picker-list {
  position: absolute;
  z-index: 10;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  box-shadow: var(--shadow-popup);
}

.picker-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.picker-list li.active {
  background: var(--accent-soft);
}

.picker-list .chip {
  margin: 0;
  font-size: 0.75rem;
}

.picker-surname {
  font-weight: 600;
}

.picker-title {
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Vyber specializaci (public/js/specialization-picker.js): ramecek, ktery vypada jako
   policko; uvnitr jsou stitky vybranych specializaci a hned za nimi policko pro psani.
   Modry obrys celeho ramecku pri psani je u pravidla input:focus vyse.
   --------------------------------------------------------------------------- */

.specialization-picker {
  position: relative;          /* seznam navrhu se zobrazi pod celym rameckem */
}

.specialization-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.5rem;          /* stejne vysoky jako ostatni policka i bez policka pro psani */
  margin-top: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  cursor: text;
}

.specialization-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  cursor: default;
}

/* Krizek pro odebrani specializace uvnitr stitku */
.chip-remove {
  padding: 0 0.15rem;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
}

.chip-remove:hover {
  opacity: 1;
}

/* Policko za stitky: bez vlastniho ramecku, zabere zbytek radku (aspon 6rem, jinak se
   presune na dalsi radek) */
.specialization-box input {
  flex: 1 1 6rem;
  min-width: 6rem;
  width: auto;
  margin: 0;
  padding: 0.2rem 0.1rem;
  border: none;
  background: transparent;
}

.specialization-box input:focus {
  outline: none;
}

/* Specializaci je hodne, seznam navrhu proto ma omezenou vysku a posouva se */
.specialization-list {
  max-height: 16rem;
  overflow-y: auto;
}

.specialization-list .chip {
  min-width: 5.5rem;
}

/* Vyber jen pro cteni: policko pro psani se skryje, zustanou stitky na sedem podkladu */
.specialization-picker.disabled .specialization-box input {
  display: none;
}

.specialization-picker.disabled .specialization-box {
  background: var(--background);
  cursor: default;
}

/* ---------------------------------------------------------------------------
   Stranka Specializace
   --------------------------------------------------------------------------- */

/* Hledani nad tabulkou: popisek a policko v jednom radku */
.search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 24rem;
}

.search-field input {
  flex: 1;
  margin-top: 0;
}

.specializations-table .col-tag {
  width: 9rem;
}

/* Pocet lidi a komisi se specializaci; u nepouzite jen sede pomlcka */
.specializations-table td.unused {
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Stranka Soucasti: strom soucasti skoly a jejich kateder
   (odsazeni bunky podle hloubky ve stromu nastavuje JavaScript pres padding-left)
   --------------------------------------------------------------------------- */

/* Radek soucasti (fakulty, ustavu): tucny nazev na sedem podkladu, nejde vybrat jako katedra */
table.selectable tbody tr.unit-row td {
  font-weight: 600;
  background: var(--surface-muted);
  cursor: default;
}

.unit-type {
  margin-left: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Stranka Lide: sloupce, ucty a hesla
   --------------------------------------------------------------------------- */

/* Stranka Lide ma hodne sloupcu: uzsi pevne sloupce,
   aby zbylo dost mista pro jmeno (jedine sloupec bez pevne sirky) */
.people-table .col-member {
  width: 5.5rem;
}

.people-table .col-department {
  width: 6.75rem;
}

.people-table .col-specializations {
  width: 9rem;
}

.people-table .col-email {
  width: 11rem;
}

.people-table .col-account {
  width: 9rem;
}

.people-table .col-actions {
  width: 4.5rem;
}

/* Clen katedry nevidi sloupce E-mail, Ucet a tlacitka (body ma tridu members-view) */
.members-view .staff-only {
  display: none;
}

/* Hnede pismo: externi clen ve sloupci Clen, ucet ceka na heslo nebo chybi e-mail */
td.member-external {
  color: var(--warning-ink);
  font-weight: 600;
}

td.account-waiting {
  color: var(--warning-ink);
}

/* Akce s uctem v detailu cloveka, oddelene carou od udaju */
.account-actions {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.account-actions h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.account-actions .buttons {
  flex-wrap: wrap;
}

#account-hint {
  margin-top: 1rem;
}

/* Docasne heslo po vygenerovani (zluty ramecek dava trida note-box), heslo strojovym pismem */
.password-box {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
}

.password-box .password {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 1.125rem;
  font-weight: 700;
}

#passwords-result table {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

/* Upozorneni ve formulari, ze cast udaju nejde menit (zluty ramecek dava trida note-box) */
.locked-note {
  margin: 0 0 0.75rem;
  padding: 0.4rem 0.6rem;
}

.email-hint {
  margin: -0.5rem 0 0.75rem;
}

/* Navrhujici katedry externisty: zaskrtavaci policka v nekolika sloupcich */
.external-department-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.2rem 0.5rem;
}

/* ---------------------------------------------------------------------------
   Filtr sloupce tabulky (column-filter.js)
   --------------------------------------------------------------------------- */

/* Tlacitko s nalevkou v zahlavi sloupce; zapnuty filtr je vyplneny modre */
th .filter-button {
  margin-left: 0.3rem;
  padding: 0.15rem 0.2rem;
  line-height: 0;
  vertical-align: middle;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.2rem;
}

th .filter-button:hover {
  color: var(--ink);
  background: var(--background);
}

th .filter-button.active {
  color: #fff;
  background: var(--accent);
}

/* Nabidka filtru: pevne v okne pod tlacitkem, pri dlouhem seznamu s posuvnikem */
.filter-popup {
  position: fixed;
  z-index: 100;
  min-width: 15rem;
  max-width: 24rem;
  overflow-y: auto;
  padding: 0.35rem;
  font-size: 0.875rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  box-shadow: var(--shadow-popup);
}

.filter-row {
  display: flex;
  align-items: center;
  border-radius: 0.2rem;
}

.filter-row:hover {
  background: var(--accent-soft);
}

/* Radek "Vse" oddeleny carou od hodnot */
.filter-row.filter-all {
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.filter-popup label.filter-option {
  flex: 1;
  min-width: 0;
  padding: 0.2rem 0.35rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.filter-popup .chip {
  margin: 0;
}

.filter-label {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.filter-count {
  color: var(--muted);
  font-size: 0.8125rem;
}

/* Tlacitko "jen" se ukaze az po najeti mysi na radek */
.filter-popup button.filter-only {
  visibility: hidden;
  padding: 0 0.45rem;
  font-size: 0.75rem;
  color: var(--accent);
  background: transparent;
  border: none;
}

.filter-row:hover button.filter-only {
  visibility: visible;
}