/* ==========================================================================
   Responzivita webové verze
   ==========================================================================
   Sdílené UI je navržené pro telefon: jednosloupcový seznam přes celou šířku.
   Na monitoru to znamená řádky široké 1200+ px, kde je název vlevo a šipka
   o půl metru dál — čitelnost i ovladatelnost tím trpí.

   Tyhle úpravy jsou záměrně JEN v webovém hostiteli (ne ve sdíleném app.css),
   aby se nijak nedotkly odladěné mobilní aplikace.

   Breakpointy navazují na `IsMobile` v MainLayout (max-width: 576px):
     do 576 px  = mobilní režim, spodní lišta       -> nic neměníme
     577–991 px = tablet, levé menu ikon            -> jen pohodlnější odsazení
     od 992 px  = desktop                            -> sloupec s max. šířkou
   ========================================================================== */

/* Tablet: obsah dostane vzduch po stranách, ať netiskne na levé menu. */
@media (min-width: 577px) and (max-width: 991px) {
  .app-container .listItem,
  .app-container .contentform {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Desktop: obsah využívá celou šířku okna, jen se drží od krajů.
   (Dřív tu byl centrovaný sloupec s max-width 1100px. Na širokém monitoru to ale
   znamenalo, že tabulky končily uprostřed a hlavička s nimi nelícovala — proto pryč.) */
@media (min-width: 992px) {
  /* Seznamy a filtry k levému okraji (obsah využívá celou šířku).
     .contentform tady schválně NENÍ — má `margin: 0 auto` a musí zůstat vycentrovaný. */
  .app-container .listItem,
  .app-container .qual-filter-card {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Formuláře a stránky s výběrem: na širokém monitoru omezená šířka a na střed.
   Roztažený formulář přes 1900 px se čte špatně — oko musí skákat mezi popiskem
   vlevo a polem vpravo.

   Dvě úrovně:
     .contentform      (ve sdíleném app.css, 500 px) — úzké formuláře, např. PersonEdit
     .contentform-wide (tady, 900 px)                — stránky se seznamy a řádky,
                                                       kterým by 500 px bylo těsných

   Jen pro web: v mobilní aplikaci se pod 992 px nic nemění. */
@media (min-width: 992px) {
  .app-container .contentform-wide {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Přihlašovací a další nepřihlášené obrazovky: na počítači doprostřed okna.
   Nemají hlavičku ani menu (ShowHeaderBar = false), takže je můžeme vysadit
   na celou výšku viewportu. Na mobilu zůstává obsah nahoře, jak byl. */
@media (min-width: 992px) {
  .auth-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* Širší levé menu s popisky (jen web na širší obrazovce — třídu přidává MainLayout).
   Přebíjí pevných 50 px ze sdíleného app.css. Selektor je zdvojený záměrně: tenhle
   soubor se v index.html načítá PŘED sdíleným app.css, takže při stejné specificitě
   by vyhrálo sdílené pravidlo. Dvě třídy ho přebijí bez ohledu na pořadí. */
.left-menu-fixed.left-menu-fixed--wide {
  width: 210px;
  max-width: 210px;
  padding: 4px 8px;
}

.left-menu-fixed--wide .menuItem {
  width: 100%;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  transition: background-color 0.12s ease;
}

.left-menu-fixed--wide .menuItem:hover {
  background: var(--app-surface-hover);
}

/* Ikona má pevnou šířku, ať popisky začínají na stejné svislici. */
.left-menu-fixed--wide .menuItem > span:first-child {
  width: 27px;
  flex-shrink: 0;
  text-align: center;
  margin: 0 !important;
}

/* Sdílené `.menuItem span` nastavuje 22px a barvu ikon přes !important — popisek
   to musí přebít, jinak vypadá jako další ikona. */
.left-menu-fixed--wide .menuItem .menuItem-label {
  font-size: 0.9rem !important;
  font-weight: 500;
  color: var(--rz-text-color, #333) !important;
  margin: 0 !important;
  width: auto;
  text-align: left;
}

/* Výběr organizace pro správce systému — stojí nad ostatními položkami menu, protože
   určuje, co pod ním vůbec bude. Oddělovač pod ním to dává najevo i vizuálně. */
.menu-org-picker {
  width: 100%;
  padding: 4px 2px 14px;
  border-bottom: 1px solid var(--app-border, rgba(128, 128, 128, 0.25));
}

/* Menu má 210 px, takže na běžnou velikost písma se název organizace ani výzva k výběru
   nevejdou a usekly by se třemi tečkami. */
.menu-org-picker .rz-dropdown-label,
.menu-org-picker .rz-placeholder {
  font-size: 0.8rem;
}

/* Vyhledávací pruh na desktopu.
   V mobilní aplikaci je `position: fixed` (drží se pod hlavičkou a obsah pod ním má
   odsazení přes .content-area). Na desktopu ale .content-area není, takže fixní pruh
   překrýval první řádek tabulky a navíc nešel přes celou šířku.
   Sticky ho vrátí do toku — nic nepřekrývá a pod hlavičkou drží dál. */
@media (min-width: 992px) {
  .app-container .filter-bar {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    width: 100%;
    max-width: none;
    margin-bottom: 8px;
  }
}

/* Master–detail: seznam vlevo, detail vybrané položky vpravo.
   Pod 992 px (tablet) se detail zalomí pod seznam, aby zůstal čitelný. Renderuje se jen ve
   webovém hostiteli přes IsDesktopWeb, takže mobilní aplikace tyhle třídy nikdy nedostane. */
.master-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

@media (min-width: 992px) {
  .master-detail {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  /* Detail zůstane na očích i při dlouhém seznamu. 76px = fixní hlavička + odsazení. */
  .master-detail__detail {
    position: sticky;
    top: 76px;
    padding: 0;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}

/* Sloupec se seznamem nesmí roztahovat grid — bez min-width:0 by ho široká tabulka přetlačila. */
.master-detail__master {
  min-width: 0;
}

/* Uvnitř master–detailu už šířku řídí grid, takže tu centrovací max-width nechceme. */
@media (min-width: 992px) {
  .app-container .master-detail .events-grid,
  .app-container .master-detail .persons-grid,
  .app-container .master-detail .slots-grid,
  .app-container .master-detail .positions-grid {
    max-width: none;
  }
}

/* Dvousloupcový chat: seznam konverzací vlevo, vlákno vpravo.
   Renderuje se jen přes IsDesktopWeb, takže mobilní aplikace tyhle třídy nikdy nedostane. */
@media (min-width: 992px) {
  .chat-split {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    /* Výška okna minus hlavička — ať se roluje uvnitř sloupců, ne celá stránka. */
    height: calc(100vh - 76px);
  }

  .chat-split__list {
    overflow-y: auto;
    height: 100%;
    padding-right: 4px;
  }

  .chat-split__thread {
    height: 100%;
    min-width: 0;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Vlákno uvnitř sloupce nesmí počítat výšku podle celého okna. */
  .chat-split__thread .chat-wrap {
    height: 100%;
    min-height: 0;
  }

  .chat-split__empty {
    height: 100%;
  }

  /* Vybraná konverzace v levém sloupci. */
  .chat-conv-item--active {
    background: var(--app-surface-alt);
    border-left: 3px solid var(--rz-primary);
  }
}

/* Pruh s názvem konverzace a ozubeným kolem nad vloženým vláknem. */
.chat-embedded-bar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-alt);
  flex-shrink: 0;
}

#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

  .blazor-error-boundary::after {
    content: "An error has occurred."
  }

.loading-progress {
  position: absolute;
  display: block;
  width: 8rem;
  height: 8rem;
  inset: 20vh 0 auto 0;
  margin: 0 auto 0 auto;
}

  .loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
  }

    .loading-progress circle:last-child {
      stroke: #1b6ec2;
      stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
      transition: stroke-dasharray 0.05s ease-in-out;
    }

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

  .loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
  }