/* Desktop workspace; loaded after all shared styles. */
.crewlio-web{background:var(--app-page-bg);font-family:Inter,sans-serif}
.web-shell{--web-nav-width:244px;height:auto;min-height:100dvh}
.web-shell>.rz-row{padding:0!important;display:block}
.web-navigation{position:fixed;inset:0 auto 0 0;width:var(--web-nav-width);background:var(--app-surface,white);border-right:1px solid var(--app-border);padding:30px 18px 20px;display:flex;flex-direction:column;gap:5px;overflow-y:auto;z-index:100}
.web-brand{padding:0 12px 26px;display:flex;flex-direction:column;gap:13px;text-decoration:none}
.web-brand img{width:146px;height:auto}.web-brand span,.web-nav-note{font-size:11px;color:var(--app-text-muted)}
.web-nav-caption{font-size:10px;text-transform:uppercase;font-weight:700;letter-spacing:.12em;color:var(--app-text-muted);padding:20px 12px 8px}
.web-navigation a:not(.web-brand){display:flex;align-items:center;gap:12px;padding:12px 14px;color:var(--app-text-secondary);border-radius:10px;text-decoration:none;font-size:13px;font-weight:500}
.web-navigation a:hover{background:var(--app-surface-hover)}.web-navigation a.active{background:color-mix(in srgb,var(--rz-primary) 11%,transparent);color:var(--rz-primary);font-weight:700}
.web-navigation .material-symbols-outlined{font-size:22px}.web-nav-bottom{margin-top:auto;padding-top:30px}.web-nav-note{display:block;padding:20px 12px 0}
.web-topbar{margin-left:var(--web-nav-width);min-height:88px;padding:20px 32px;display:flex;justify-content:space-between;gap:20px;align-items:center;background:var(--app-surface);border-bottom:1px solid var(--app-border);position:sticky;top:0;z-index:100}
.web-heading{min-width:0}.web-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--app-text-muted)}.web-heading h1{font-size:24px;font-weight:700;margin:4px 0 0;letter-spacing:-.7px}
.web-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:flex-end}.web-icon{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;border:1px solid var(--app-border);background:var(--app-surface);color:var(--rz-primary);border-radius:10px;text-decoration:none;position:relative}.web-icon:hover{background:var(--app-surface-hover)}.web-count{font-size:10px;margin-left:3px}
.web-shell .web-content{min-width:0;margin-left:var(--web-nav-width);padding:26px 32px 40px;border:0!important}.web-shell:not(:has(.web-navigation)) .web-content{margin-left:0;padding:0}
.web-content .filter-bar,.web-content .filter-bar-events,.web-content .filter-bar-tab,.web-content .tab-bar{position:static!important;width:100%;margin-bottom:18px}.web-content .content-area{height:auto;padding-top:0}.web-content .contentform{max-width:760px}.web-content .contentform-wide{max-width:1120px}
.web-content .rz-card{border:1px solid var(--app-border);border-radius:14px;box-shadow:0 3px 14px #102a4305}.web-content .rz-button{text-transform:none;letter-spacing:0;border-radius:8px}.web-content .rz-data-grid{border-radius:12px;overflow:auto}.web-content .rz-grid-table th{background:var(--app-surface-hover);font-size:11px}.web-content .rz-grid-table td{padding-top:13px;padding-bottom:13px}
.web-content .chat-split{height:calc(100dvh - 155px)}.web-content .master-detail__detail{top:108px}.web-content .auth-screen{min-height:100dvh;background:radial-gradient(ellipse at 20% 10%,#c5dce955,transparent 65%),var(--app-page-bg)}
.crewlio-web :focus-visible{outline:3px solid color-mix(in srgb,var(--rz-primary) 55%,white);outline-offset:3px}
@media(max-width:1000px) and (min-width:577px){.web-shell{--web-nav-width:204px}.web-topbar{padding:18px}.web-shell .web-content{padding:20px 18px}.web-heading h1{font-size:20px}}
@media(max-width:576px){.web-shell{--web-nav-width:0px}.web-navigation{position:static;width:100%;padding:10px;flex-direction:row;overflow-x:auto;border-bottom:1px solid var(--app-border);gap:5px}.web-brand,.web-nav-caption,.web-nav-note{display:none!important}.web-nav-bottom{margin:0;padding:0}.web-navigation a:not(.web-brand){white-space:nowrap;padding:10px;font-size:12px}.web-navigation .material-symbols-outlined{font-size:19px}.web-topbar{position:static;padding:16px;flex-wrap:wrap}.web-heading h1{font-size:22px}.web-actions{justify-content:flex-start}.web-shell .web-content{padding:16px 10px 30px}.web-content .contentform{width:100%}.web-content .chat-wrap{height:calc(100dvh - 220px)}}
@media(prefers-reduced-motion:reduce){.crewlio-web *{animation:none!important;transition:none!important}}

/* Radzen ships this font locally; do not depend on an additional icon CDN. */
.crewlio-web .material-symbols-outlined { font-family:"Material Symbols";font-style:normal;font-weight:400;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';text-rendering:optimizeLegibility;flex-shrink:0; }
.web-heading-group { display:flex;align-items:center;gap:14px;min-width:0; }
.web-actions > * { flex-shrink:0; }
.web-heading h1 { overflow-wrap:anywhere; }
.web-content .breadcrumb { position:static; }
.web-content .rz-stack { min-width:0; }
.web-content input,.web-content textarea,.web-content .rz-dropdown { max-width:100%; }
.web-content .rz-button { min-height:40px; }
.web-content .rz-button-text { white-space:normal; }
.web-content .listItem { border-radius:12px; }
@media(max-width:1000px) { .web-topbar { flex-wrap:wrap; } }

/* Visible, labelled page actions instead of a mobile overflow menu. */
.web-actions .web-page-action { width:auto;min-height:40px;padding:10px 14px;border-radius:9px; }
.web-page-action .rz-button-text { display:flex;align-items:center;gap:9px;font-size:13px;white-space:normal; }
.web-content .events-view-switcher { margin:0 0 16px;max-width:360px;background:var(--app-surface); }
.web-content .chat-safety-nav--under-filter { margin-top:0; }
.web-content .chat-safety-links { flex-wrap:wrap; }
.web-content .chat-split { height:calc(100dvh - 277px);min-height:420px; }
.web-section-intro { margin:4px 0 26px; }.web-section-intro h2 { font-size:22px;font-weight:650; }.web-section-intro p { color:var(--app-text-secondary);font-size:14px; }
.web-hub-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1100px; }
.web-hub-card { display:flex;align-items:center;gap:18px;padding:26px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:16px;text-decoration:none;color:var(--app-text);transition:border-color .15s,box-shadow .15s; }
.web-hub-card:hover { border-color:var(--rz-primary);box-shadow:0 5px 20px var(--app-shadow-color-soft);color:var(--app-text); }
.web-hub-card div { flex:1;min-width:0; }.web-hub-card h3 { margin:0 0 7px;font-size:16px;font-weight:650; }.web-hub-card p { margin:0;color:var(--app-text-secondary);font-size:13px; }
.web-hub-icon { background:color-mix(in srgb,var(--rz-primary) 10%,transparent);border-radius:12px;padding:12px;box-sizing:content-box;color:var(--rz-primary); }
.web-content .auth-screen { max-width:440px;padding:36px 24px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:20px;min-height:0;margin:6vh auto;box-shadow:0 16px 56px var(--app-shadow-color-soft); }
.web-content .auth-screen .logoAuthLayout { max-width:230px; }
@media(max-width:1100px) { .web-content .master-detail { grid-template-columns:minmax(0,1fr); }.web-content .master-detail__detail { position:static;max-height:none; }.web-hub-grid { grid-template-columns:minmax(0,1fr); } }
@media(min-width:992px) { .web-content .chat-split { grid-template-columns:minmax(230px,30%) minmax(0,1fr); } }
@media(max-width:991px) { .web-content .chat-split { height:auto; }.web-content .chat-split__thread { min-width:0;margin-top:18px; }.web-content .chat-split__thread .chat-wrap { height:65dvh;min-height:380px; } }
@media(max-width:576px) { .web-actions { width:100%;gap:7px; }.web-actions .web-page-action { padding:9px 11px; }.web-hub-card { padding:20px 16px; }.web-content .auth-screen { margin:18px auto;max-width:calc(100% - 24px);padding:28px 20px; } }

.web-settings-grid { margin:24px auto;max-width:1200px; }
.web-settings-grid .web-hub-card { padding:20px; }

.web-nav-links { display:flex;flex-direction:column;gap:5px;flex:1; }
.web-org-context { margin:0 0 8px;padding:12px;background:var(--app-surface-alt);border:1px solid var(--app-border);border-radius:12px; }
.web-org-context label { display:block;font-size:11px;font-weight:650;color:var(--app-text-secondary);margin-bottom:8px; }
.web-org-context select { width:100%;min-height:42px;border:1px solid var(--app-border-strong);border-radius:8px;background:var(--app-surface);color:var(--app-text);font:inherit;font-size:12px;padding:7px; }
.web-org-mode { display:block;margin-top:10px;font-size:11px;color:var(--rz-primary);font-weight:600; }
.web-org-exit { border:0;background:transparent;text-align:left;padding:9px 0 0;color:var(--rz-primary);font-size:11px;text-decoration:underline;cursor:pointer; }
@media(max-width:576px) { .web-navigation { display:block;overflow:visible; }.web-nav-links { flex-direction:row;overflow-x:auto;align-items:center; }.web-org-context { margin-bottom:10px; }.web-org-context select { font-size:16px; }.web-nav-links > a { flex-shrink:0; } }

/* ---- Segmentový přepínač (RadzenSelectBar) ------------------------------------------
   Radzen kreslí přepínač jako řadu samostatných tlačítek s rámečky, což na širokém
   monitoru působí jako tři rozházená tlačítka. Tady z něj je jeden ovládací prvek:
   podkladová lišta a v ní „vystouplý“ vybraný segment. Jen na webu (.web-shell) —
   mobilní aplikace si nechává svůj vzhled vyladěný na dotyk. Barvy jdou přes proměnné
   motivu, takže to sedí ve světlém i tmavém. */
.web-shell .rz-selectbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface-alt);
}
.web-shell .rz-selectbar > .rz-button {
  min-height: 32px;
  height: auto;
  margin: 0;
  padding: 6px 14px;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none;
  /* Ne --app-text-secondary: na šedé liště ve světlém motivu vyšel kontrast 4,3 : 1, těsně
     pod normou 4,5. Míchání s podkladem drží nevybrané položky tlumené, ale čitelné. */
  color: color-mix(in srgb, var(--app-text) 80%, var(--app-surface-alt)) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.web-shell .rz-selectbar > .rz-button:not(.rz-state-active):hover {
  background: var(--app-surface-hover) !important;
  color: var(--app-text) !important;
}
.web-shell .rz-selectbar > .rz-button.rz-state-active {
  background: var(--app-surface) !important;
  color: var(--rz-primary) !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 0 0 1px var(--app-border);
}
.web-shell .rz-selectbar > .rz-button:focus-visible {
  outline: 2px solid var(--rz-primary);
  outline-offset: 1px;
}

/* ---- Cesta ke stránce v hlavičce (místo obecného „Pracovní prostor“) -----------------
   Jeden řádek, nikdy se nezalamuje — hlavička by jinak poskakovala. Dlouhé kroky se
   zkrátí trojtečkou (celý text je v title), na úzkém okně se dřívější kroky sbalí do „…“
   a zůstanou poslední dva. Poslední krok je zvýrazněný: u stránek osoby je to její jméno,
   kvůli kterému tu cesta hlavně je — správce musí vidět, komu upravuje údaje. */
.web-crumbs { min-width: 0; margin-left: -7px; }
.web-crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.web-crumbs__list > li { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
.web-crumbs__sep, .web-crumbs__ellipsis { flex: 0 0 auto !important; }
.web-crumbs__item {
  display: block;
  max-width: 26ch;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--app-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .15s ease, color .15s ease;
}
a.web-crumbs__item:hover {
  background: var(--app-surface-hover);
  color: var(--rz-primary);
}
.web-crumbs__item--current {
  max-width: 40ch;
  color: var(--app-text);
  font-weight: 600;
}
a.web-crumbs__item--current:hover { color: var(--app-text); }
.web-crumbs__sep .material-symbols-outlined {
  font-size: 16px;
  color: var(--app-text-faint);
}
.web-crumbs__ellipsis {
  display: none !important;
  padding: 3px 7px;
  font-size: 13px;
  color: var(--app-text-muted);
  cursor: default;
}
@media (max-width: 1000px) {
  .web-crumbs__item { max-width: 18ch; }
  .web-crumbs__item--current { max-width: 28ch; }
}
@media (max-width: 576px) {
  .web-crumbs--collapsible { display: none !important; }
  .web-crumbs__ellipsis { display: flex !important; }
  .web-crumbs__item { max-width: 14ch; }
  .web-crumbs__item--current { max-width: 22ch; }
}

/* ---- Roztažená konverzace -----------------------------------------------------------
   Vlákno přes celou plochu: seznam konverzací se skryje (zůstane načtený, ať se po
   zmenšení nemusí nic znovu stahovat) a výška se počítá jen od horní lišty, protože hledání
   a odkazy nad vláknem v tomhle režimu nejsou. */
.web-content .chat-split--expanded {
  grid-template-columns: minmax(0, 1fr) !important;
  height: calc(100dvh - 164px);
}
.web-content .chat-split--expanded .chat-split__list { display: none !important; }
@media (max-width: 991px) {
  .web-content .chat-split--expanded .chat-split__thread { margin-top: 0; }
  .web-content .chat-split--expanded .chat-split__thread .chat-wrap { height: calc(100dvh - 190px); }
}

/* Název konverzace v pruhu nad vláknem se zkrátí, aby neodsunul tlačítka mimo řádek. */
.chat-embedded-bar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-embedded-bar__actions { flex-shrink: 0; }

/* „Bezpečnost chatu“ ve vloženém vlákně jako jeden nízký řádek. Karta zůstává nad zprávami
   (nahlášení a blokování musí být po ruce), jen už nezabírá skoro sto pixelů výšky, které
   na desktopu chyběly pro čtení. */
.web-content .chat-split__thread .chat-safety-toggle { padding: 6px 14px; gap: 10px; }
.web-content .chat-split__thread .chat-safety-toggle .chat-safety-symbol { flex-basis: 28px; width: 28px; height: 28px; border-radius: 8px; }
.web-content .chat-split__thread .chat-safety-toggle .chat-safety-symbol .rzi { font-size: 18px; }
.web-content .chat-split__thread .chat-safety-toggle .chat-safety-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.web-content .chat-split__thread .chat-safety-toggle .chat-safety-heading strong { font-size: 13px; white-space: nowrap; }
.web-content .chat-split__thread .chat-safety-toggle .chat-safety-heading small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Potvrzovací dialogy: „Zrušit“ jako sekundární tlačítko -------------------------
   Radzen kreslí „Zrušit“ jako plné tlačítko Base a „Potvrdit“ jako plné Primary. V našem
   motivu mají obě stejnou barvu, takže nešlo poznat, které je které. Zrušení je proto
   světlé s rámečkem a potvrzení zůstává plné. Jen web — mobilní aplikace si nechává svůj
   vzhled. Barvy jdou přes proměnné motivu, takže to sedí ve světlém i tmavém. */
.crewlio-web .rz-dialog .rz-button.rz-base.rz-shade-default {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border-strong);
  box-shadow: none;
}
.crewlio-web .rz-dialog .rz-button.rz-base.rz-shade-default:hover {
  background: var(--app-surface-hover) !important;
}