/* =====================================================================
   components.css – komponenty portálu (kp-controls + kp-menu)
   Čte tokeny z tokens.css. Načítat po base.css.
   ===================================================================== */

/* ---- Tlačítka --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--control-h); padding: 0 var(--sp-4); white-space: nowrap;
  font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn--sm { height: var(--control-h-sm); padding: 0 var(--sp-3); }
/* Nejmenší velikost - drobná akce U ŘÁDKU tabulky (smazat řádek, duplikovat,
   krok o jedna). Osmnáct obrazovek ji používalo, ale definici nikdy nedostala,
   takže se vykreslovala jako plnotučné tlačítko 40 px vysoké: v mřížce
   položek rozhodila svislé zarovnání a vytlačila vodorovný posuvník. */
.btn--xs { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-xs); border-radius: var(--radius-sm); }
.btn--block { width: 100%; }
.btn--primary { background: var(--color-brand); color: var(--color-brand-contrast); }
.btn--primary:hover { background: var(--color-brand-hover); }
.btn--primary:active { background: var(--color-brand-active); }
.btn--secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); }
.btn--secondary:hover { background: var(--color-surface-2); }
.btn--ghost { background: transparent; color: var(--color-brand-text); }
.btn--ghost:hover { background: var(--color-brand-soft); }
.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
/* Mazání v řádku tabulky – červené, ale ne plná plocha, aby řádek nekřičel. */
.btn--ghost.is-danger { color: var(--color-danger-text); }
.btn--ghost.is-danger:hover { background: var(--color-danger-soft); }
.btn--idp { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); }
.btn--idp:hover { background: var(--color-surface-2); }
.btn:disabled, .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---- Ikonové tlačítko / pill ----------------------------------- */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: none; background: none;
  color: var(--color-text-muted); border-radius: var(--radius-sm); cursor: pointer;
}
.iconbtn:hover { background: var(--color-surface-2); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn--xs { width: 26px; height: 26px; vertical-align: middle; }
.iconbtn--xs svg { width: 15px; height: 15px; }
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 36px; padding: 0 var(--sp-3);
  border: 1px solid var(--color-border); background: none; color: var(--color-text-muted);
  border-radius: var(--radius-pill); cursor: pointer; font: inherit; font-size: var(--fs-sm);
}
.pill:hover { background: var(--color-surface-2); }
.pill svg { width: 16px; height: 16px; }

/* ---- Definition list (read-only key/value bloky) ---------------
   Vzdušný 2-sloupcový info layout (kontaktní karta), bez čar.
   Štítek nad hodnotou, sloupce se přizpůsobí šířce. */
.dl {
  margin: 0; display: grid; gap: var(--sp-4) var(--sp-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dl-row { display: block; min-width: 0; }
.dl-row dt {
  color: var(--color-text-muted);
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .04em; margin: 0 0 2px;
}
.dl-row dd { margin: 0; font-weight: var(--fw-medium); word-break: break-word; }
.dl-row--wide { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .dl { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ---- Avatar ----------------------------------------------------- */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-semibold); font-size: 13px; cursor: pointer; border: none;
  overflow: hidden; padding: 0;
}
.avatar--img { background: var(--color-surface-2); }
.avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 50%;
}

/* ---- Co-branding (logo + název partnera v záhlaví) ------------- */
.brand { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--color-text); }
/* Definite height (not auto) so SVG logos with a viewBox but no intrinsic
   width/height don't collapse to 0 in <img>; raster logos keep their ratio
   via width:auto + object-fit. */
.brand__logo { height: calc(var(--topbar-h) - var(--sp-5)); max-width: 200px; width: auto; object-fit: contain; }
.brand__logo--ph {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: 14px;
}
.brand__name { font-weight: var(--fw-semibold); }
@media (max-width: 639px) { .brand__name { display: none; } }

/* ---- Drobečky --------------------------------------------------- */
.crumbs { font-size: var(--fs-sm); color: var(--color-text-muted); display: flex; gap: var(--sp-2); align-items: center; }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--color-text); font-weight: var(--fw-medium); }

/* ---- Navigace v sidebaru --------------------------------------- */
.navitem {
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--tap-min); padding: 0 var(--sp-4);
  color: var(--color-text-muted); text-decoration: none;
  border-left: 3px solid transparent; font-size: var(--fs-sm);
}
.navitem:hover { background: var(--color-brand-soft); color: var(--color-text); }
.navitem.is-active {
  background: var(--color-brand-soft); color: var(--color-brand-text);
  border-left-color: var(--color-brand); font-weight: var(--fw-semibold);
}
.navitem svg { width: 20px; height: 20px; flex: none; }
.navitem__label { flex: 1; }
.navitem__badge {
  font-size: var(--fs-xs); background: var(--color-surface-2); color: var(--color-text-muted);
  padding: 0 var(--sp-2); border-radius: var(--radius-pill);
}
.navitem__badge--danger { background: var(--color-danger-soft); color: var(--color-danger-text); }
.nav-sep { height: 1px; background: var(--color-border); margin: var(--sp-3) var(--sp-4); }
/* Nadpis sekce v levém menu (CLIENTS / Microsoft CSP / …). */
.nav-section { font-size: 10px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-subtle); padding: var(--sp-4) var(--sp-3) var(--sp-1); }
.nav-section:first-child { padding-top: var(--sp-1); }
/* Sbalený režim (ikony) – viz blok „Sbalené menu“ u .navitem--group níž. */

/* ---- Dropdown (sdílený: jazyk, uživatel) ----------------------- */
[data-dropdown] { position: relative; }
.dropdown__menu {
  position: absolute; top: calc(100% + var(--sp-2)); right: 0;
  min-width: 200px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--sp-1); z-index: var(--z-dropdown);
  list-style: none; margin: 0;
}
.dropdown__menu[hidden] { display: none; }
.dropdown__item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-2) var(--sp-3); border: none; background: none;
  color: var(--color-text); font: inherit; font-size: var(--fs-sm);
  text-align: left; cursor: pointer; border-radius: var(--radius-sm); text-decoration: none;
}
.dropdown__item:hover { background: var(--color-brand-soft); }
.dropdown__item[aria-checked="true"] { font-weight: var(--fw-semibold); color: var(--color-brand-text); }
.dropdown__check { margin-left: auto; opacity: 0; }
.dropdown__item[aria-checked="true"] .dropdown__check { opacity: 1; }
.dropdown__sep { height: 1px; background: var(--color-border); margin: var(--sp-1) var(--sp-2); }
.dropdown__item:focus-visible { outline: none; background: var(--color-brand-soft); box-shadow: var(--shadow-focus); }
/* Položka nabídky jako <button> uvnitř <form> (akce s potvrzením) vypadá jako odkaz. */
.dropdown__menu form { margin: 0; display: block; }
button.dropdown__item { font-size: var(--fs-sm); }
.dropdown__item[disabled] { color: var(--color-text-muted); cursor: not-allowed; background: none; }
/* Řádková nabídka „⋯" (pp-controls: Tabulky – řádkové akce). Menu umisťuje app.js
   jako position:fixed, aby ho neořízl .table-wrap s overflow-x:auto. */
.dropdown--row { display: inline-block; }
.dropdown--row .dropdown__menu { white-space: nowrap; }
/* Nabídka je v DOM uvnitř buňky s akcemi (.m365-rowact: text-align/flex doprava,
   form inline-block) – položky i jejich formuláře musí zůstat zarovnané vlevo
   a na celou šířku nabídky, ať „Zablokovat" a „Smazat" nestojí odsazené. */
.dropdown__menu { text-align: left; }
.dropdown__menu form,
td.m365-rowact .dropdown__menu form { display: block; width: 100%; margin: 0; }

/* ---- Přepínač jazyků (vlaječka + dropdown) --------------------- */
.flag {
  width: 22px; height: 15px; border-radius: 2px; object-fit: cover;
  border: 1px solid rgba(0,0,0,.08); flex: none; display: block;
}
.langswitch__cur { font-size: var(--fs-sm); }
@media (max-width: 639px) { .langswitch__cur { display: none; } }

/* ---- Pole / formuláře ------------------------------------------ */
/* `align-content: start` je povinné: `.field` je grid a výchozí `normal`
   se u gridu chová jako `stretch`, takže v dvousloupcové mřížce se řádky pole
   BEZ nápovědy roztáhly na výšku souseda S nápovědou - popisek zůstal nahoře,
   ale input se odsunul dolů a pole vedle sebe pak nebyla zarovnaná. */
.field { display: grid; align-content: start; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.req { color: var(--color-danger-text); }
.input, .select, .textarea {
  height: var(--control-h); width: 100%; padding: 0 var(--sp-3);
  font-size: var(--fs-base); color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}
.textarea { height: auto; min-height: calc(var(--control-h) * 2.5); padding: var(--sp-3); }
.input::placeholder { color: var(--color-text-subtle); }
.input:disabled { background: var(--color-surface-2); color: var(--color-text-subtle); }
.field__hint { font-size: var(--fs-xs); color: var(--color-text-muted); margin: 0; }
/* Hodnota, která se nevybírá - portál ji odvodil a jen ji ukazuje. Vypadá
   jako text, ne jako zamčené pole: zašedlý input svádí do něj klikat. */
.field__static { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); color: var(--color-text); font-weight: var(--fw-medium); }
/* Akce patřící k poli (např. „Nový typ" u selectu) – samostatný řádek pod
   polem, aby ji nikdo nepřehlédl v šedé nápovědě. */
.field__action { display: flex; gap: var(--sp-2); margin: var(--sp-1) 0 0; }
.field__error { font-size: var(--fs-xs); color: var(--color-danger-text); margin: 0; }
.field.is-invalid .input { border-color: var(--color-danger); }

/* ---- Karty ------------------------------------------------------ */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-5);
}
.card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border);
}
.card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.card__body { padding: var(--sp-5); }

/* ---- KPI dlaždice ----------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.kpis--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1099px) { .kpis--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 899px) { .kpis { grid-template-columns: 1fr; } }
.kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--sp-5); }
.kpi__label { font-size: var(--fs-sm); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.kpi__val { font-size: 2rem; font-weight: var(--fw-semibold); line-height: 1; }
.kpi__sub { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--sp-2); }
.kpi__icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.kpi__icon svg { width: 18px; height: 18px; }

/* ---- Nadpis stránky -------------------------------------------- */
.page-h { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin-bottom: var(--sp-1); }
.page-sub { color: var(--color-text-muted); margin-bottom: var(--sp-6); }

/* ---- Tabulky ---------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: var(--sp-3) var(--sp-5); text-align: left; }
.table thead th { background: var(--color-surface-2); color: var(--color-text-muted); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--color-border); }
.table tbody tr { border-bottom: 1px solid var(--color-border); }
.table tbody tr:hover { background: var(--color-brand-soft); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { text-align: right; white-space: nowrap; }

@media (max-width: 639px) {
  .table.table--stack thead { display: none; }
  .table.table--stack, .table.table--stack tbody, .table.table--stack tr, .table.table--stack td { display: block; width: 100%; }
  .table.table--stack tr { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--sp-3); padding: var(--sp-2); }
  .table.table--stack td { display: flex; justify-content: space-between; gap: var(--sp-3); border: 0; }
  .table.table--stack td::before { content: attr(data-label); font-weight: var(--fw-medium); color: var(--color-text-muted); }
}

/* ---- Badge ------------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-medium); padding: 2px var(--sp-2); border-radius: var(--radius-pill); white-space: nowrap; }
.badge--success { background: var(--color-success-soft); color: var(--color-success-text); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger-text); }
.badge--neutral { background: var(--color-surface-2);    color: var(--color-text-muted); }
.badge--info    { background: var(--color-info-soft);    color: var(--color-info-text); }
.badge--violet  { background: var(--color-violet-soft); color: var(--color-violet-text); }

/* ---- Banner (info pruh nad sekcí) ------------------------------- */
/* @deprecated → .flash (standard UI S3). Nepoužívat v novém kódu; převod: docs/ui-standard-backlog.md. */
.banner { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); font-size: var(--fs-sm); margin-bottom: var(--sp-4); border: 1px solid var(--color-border); background: var(--color-surface); }
.banner--muted { background: var(--color-surface-2); color: var(--color-text-muted); }
.banner--warning { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: var(--color-warning); }
.banner__icon { display: inline-flex; align-items: center; }

/* ---- Empty state ------------------------------------------------ */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--color-text-muted); }
.empty__icon { display: inline-flex; padding: var(--sp-3); border-radius: 999px; background: var(--color-surface-2); margin-bottom: var(--sp-3); }
.empty__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0 0 var(--sp-1); }
.empty__text { font-size: var(--fs-sm); margin: 0; }

/* ---- Tabulka: sortovací záhlaví, nowrap, pager ------------------ */
.table th.nowrap, .table td.nowrap { white-space: nowrap; }
.table th.center, .table td.center { text-align: center; }

.th-sort {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  color: inherit; text-decoration: none; font-weight: inherit;
}
.th-sort:hover { color: var(--color-brand-text); }
.th-sort__i { font-size: var(--fs-xs); color: var(--color-text-subtle); }
.th-sort.is-active { color: var(--color-brand-text); }
.th-sort.is-active .th-sort__i { color: var(--color-brand-text); }
/* Klikací hlavička jako tlačítko (klientské řazení bez reloadu) – reset nativního vzhledu. */
button.th-sort--btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; }
.num button.th-sort--btn { flex-direction: row-reverse; } /* číselné sloupce: šipka vlevo od labelu */

.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--color-border);
}
.pager__info { color: var(--color-text-muted); font-size: var(--fs-sm); }
@media (max-width: 639px) {
  .pager { flex-direction: column; }
  .pager__info { order: -1; }
}

/* ---- Card head actions (right-aligned buttons/filters) ---------- */
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border); }
.card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.card__actions { display: flex; align-items: center; gap: var(--sp-2); }
.card__body { padding: var(--sp-5); }

/* ---- Segmented control (filter toggle) -------------------------- */
.seg { display: inline-flex; background: var(--color-surface-2); padding: 2px; border-radius: var(--radius-pill); gap: 2px; }
.seg__btn {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 4px var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--color-text-muted); text-decoration: none;
  border-radius: var(--radius-pill); white-space: nowrap;
}
.seg__btn:hover { color: var(--color-text); }
.seg__btn.is-active { background: var(--color-brand); color: var(--color-brand-contrast); }
.seg__btn.is-active:hover { color: var(--color-brand-contrast); }

/* ---- Login karta ------------------------------------------------ */
.login { width: 100%; max-width: 420px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--sp-6); }
.login__brand { display: flex; justify-content: center; margin-bottom: var(--sp-4); }
.login__brand .cp-logo { height: 34px; width: auto; max-width: 240px; object-fit: contain; }
.login__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); text-align: center; margin-bottom: var(--sp-1); }
.login__sub { font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; margin-bottom: var(--sp-5); }
.login .btn--idp { margin-bottom: var(--sp-3); }
.divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--color-text-subtle); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; margin: var(--sp-5) 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.row-between { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-3); }
.link { color: var(--color-brand-text); font-size: var(--fs-sm); text-decoration: none; }
.link:hover { text-decoration: underline; }
.mfa-note { font-size: var(--fs-xs); color: var(--color-text-muted); background: var(--color-brand-soft); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }

/* =====================================================================
   Sidebar – box přihlášeného uživatele (levý dolní roh). Partner portál.
   ===================================================================== */
.sidebar__nav { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.userbox {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.userbox__id { display: flex; align-items: center; gap: var(--sp-3); }
.userbox__avatar {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill);
  background: var(--color-brand-soft); color: var(--color-brand-text);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  overflow: hidden;
}
.userbox__avatar--img { background: var(--color-surface-2); }
.userbox__avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--radius-pill);
}
.userbox__meta { display: flex; flex-direction: column; min-width: 0; }
.userbox__lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-subtle);
}
.userbox__name {
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.userbox__mail {
  font-size: var(--fs-xs); color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Diagnostika oprávnění aktuální stránky (jen hlavní firma s permissions.manage). */
.userbox__perm {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: var(--sp-2); border-top: 1px dashed var(--color-border);
}
.userbox__perm-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-subtle);
}
.userbox__perm-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-xs); color: var(--color-text);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 2px 6px;
  word-break: break-all; align-self: flex-start;
}
.userbox__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.userbox__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--color-text-muted); text-decoration: none;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 4px 8px; cursor: pointer;
}
.userbox__link:hover { color: var(--color-text); background: var(--color-brand-soft); }
.userbox__link--btn { font: inherit; }
.userbox__link svg { width: 16px; height: 16px; flex: none; }

/* Sbalený sidebar: jen avatar + ikony, bez textu (F1: jen uvnitř .sidebar, jen desktop) */
@media (min-width: 900px) {
  .app.is-collapsed .sidebar .userbox { align-items: center; }
  .app.is-collapsed .sidebar .userbox__meta,
  .app.is-collapsed .sidebar .userbox__perm,
  .app.is-collapsed .sidebar .userbox__link span { display: none; }
  .app.is-collapsed .sidebar .userbox__actions { flex-direction: column; }
}

/* =====================================================================
   Nastavení účtu (settings) – dvousloupcový layout + bezpečnost (MFA).
   Viz mockups/settings-security.html.
   ===================================================================== */
.settings { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-5); align-items: start; }
.subnav-v { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
.subnav-v a {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  color: var(--color-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none;
}
.subnav-v a:hover { background: var(--color-surface-2); color: var(--color-text); }
.subnav-v a.is-active { background: var(--color-brand-soft); color: var(--color-brand-text); }
.enroll {
  display: flex; gap: var(--sp-5); align-items: flex-start;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--sp-4); margin-top: var(--sp-3);
}
.enroll__qr { width: 180px; flex: none; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px; line-height: 0; }
.enroll__qr svg { width: 100%; height: auto; }
.enroll code { font-family: var(--font-mono); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 4px 8px; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); max-width: 380px; font-family: var(--font-mono); font-size: var(--fs-sm); }
.codes span { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 10px; letter-spacing: 1px; text-align: center; }
/* @deprecated → .flash.flash--info.flash--inline (standard UI S3). */
.note { font-size: var(--fs-xs); color: var(--color-text-muted); background: var(--color-brand-soft); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--sp-3); line-height: 1.5; margin-top: var(--sp-3); }
@media (max-width: 820px) { .settings { grid-template-columns: 1fr; } .subnav-v { position: static; flex-direction: row; flex-wrap: wrap; } .enroll { flex-direction: column; } }

/* =====================================================================
   Chybové stránky (403/404/500/relace) – viz mockups/errors.html.
   ===================================================================== */
.errpage { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-4); }
.errpage__main { width: 100%; max-width: 460px; }
.errcard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--sp-6); text-align: center; }
.errcard__ico { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); }
.errcard__ico--danger { background: var(--color-danger-soft); color: var(--color-danger-text); }
.errcard__ico--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.errcard__ico--info { background: var(--color-brand-soft); color: var(--color-brand-text); }
.errcard__ico--muted { background: var(--color-surface-2); color: var(--color-text-subtle); }
.errcard__code { font-size: 2rem; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.errcard__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: var(--sp-2) 0 4px; }
.errcard__text { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); line-height: 1.5; }
.errcard__actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }

/* Read-only pole (profil, firemní údaje) – ztlumená/šedá */
.input[readonly] { background: var(--color-surface-2); color: var(--color-text-muted); cursor: not-allowed; }

/* =====================================================================
   Role & oprávnění – editor (mockups/users-roles.html).
   ===================================================================== */
.permcat { border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: var(--sp-3); }
.permcat__h { padding: var(--sp-2) var(--sp-3); background: var(--color-surface-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.permcat__b { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3) var(--sp-4); padding: var(--sp-3); }
.perm { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); }
.perm > input { margin-top: 3px; flex: none; }
.perm__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.perm__lbl { font-weight: var(--fw-medium); display: flex; align-items: center; gap: 4px; }
.perm__lbl svg { color: var(--color-text-subtle); }
.perm__desc { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.35; }
.perm__code { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--color-text-subtle); }
.perm.is-locked { opacity: .55; }
.perm__soon { font-size: 10px; font-weight: var(--fw-medium); padding: 1px 6px; line-height: 1.4; text-transform: uppercase; letter-spacing: .02em; }
.scope-opt.is-active { border-color: var(--color-brand) !important; background: var(--color-brand-soft); }
/* user edit – přiřazené kontakty */
.assigned { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 520px; }
.assigned__row { display: flex; align-items: center; gap: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.assigned__row .uid { font-family: var(--font-mono, monospace); font-size: var(--fs-xs); color: var(--color-text-muted); }
.assigned__row form { margin: 0 0 0 auto; }
.rolechecks { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 520px; }
.rolecheck { display: flex; gap: var(--sp-3); align-items: flex-start; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }
.rolecheck.is-locked { opacity: .5; }
.rolecheck .ds { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* =====================================================================
   Správa klientů (contacts) – seznam, filtry, detail. Viz mockups
   contacts_list.html + client-detail.html. Jen tokeny (pp-design).
   ===================================================================== */

/* ---- Hlavička stránky s akcí vpravo ----------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.page-head .page-h, .page-head .page-sub { margin-bottom: 0; }
.page-h--row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.headactions { display: flex; gap: var(--sp-2); flex: none; }
.uidtag { font-size: var(--fs-xs); font-weight: var(--fw-semibold); background: var(--color-surface-2); color: var(--color-text-muted); padding: 3px 9px; border-radius: var(--radius-pill); font-family: var(--font-mono); }
.muted { color: var(--color-text-muted); }
.card__count { color: var(--color-text-muted); font-size: var(--fs-sm); }
/* `.card__head` je flex se `space-between`. Kdyz ma hlavicka i akce, jsou
   v ni TRI sourozenci a pocet skonci upprostred - odtrzeny od nadpisu,
   ke kteremu patri. `margin-right:auto` ho vrati k nadpisu a akce nechá
   vpravo. Bez akcí zůstává pocet vpravo tak, jak byl. */
.card__head:has(.card__actions) .card__count { margin-right: auto; }

/* ---- Řádek filtrů nad tabulkou ---------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--color-border); }
.filters .input, .filters .select { height: var(--control-h-sm); font-size: var(--fs-sm); width: auto; }
.filters .select--narrow { max-width: 180px; }
.filters__search { flex: 1 1 240px; min-width: 200px; }
.input--search { min-width: 240px; flex: 1; }

/* ---- Chipy aktivních filtrů ------------------------------------- */
.chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--color-border); }
.chips__label { font-size: var(--fs-xs); color: var(--color-text-muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); background: var(--color-brand-soft); color: var(--color-brand-text); padding: 3px 10px; border-radius: var(--radius-pill); text-decoration: none; }
.chip:hover { background: var(--color-brand); color: var(--color-brand-contrast); }

/* ---- Stránkování (čísla stránek) -------------------------------- */
.pager__nav { display: flex; align-items: center; gap: var(--sp-1); }
.pager__link { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--sp-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--color-text-muted); text-decoration: none; }
.pager__link:hover { background: var(--color-surface-2); color: var(--color-text); }
.pager__link.is-active { background: var(--color-brand); color: var(--color-brand-contrast); font-weight: var(--fw-medium); }
.pager__gap { color: var(--color-text-subtle); padding: 0 4px; }

/* ---- Horizontální taby uvnitř jednoho objektu (.subnav) ---------- */
.subnav { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-5); }
.subnav__link { display: inline-flex; align-items: center; height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.subnav__link:hover { color: var(--color-text); }
.subnav__link.is-active { color: var(--color-brand-text); border-bottom-color: var(--color-brand); pointer-events: none; }
@media (max-width: 599px) { .subnav { overflow-x: auto; flex-wrap: nowrap; } }
/* Záložky, které přepíná prohlížeč (detail dokladu) - jsou to `<button>`y,
   ne odkazy, protože se nikam nenaviguje a rozepsaný formulář musí zůstat. */
.subnav__link { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.subnav__link.is-active { pointer-events: auto; cursor: default; }
.subnav__count { margin-left: var(--sp-2); padding: 0 var(--sp-2); border-radius: var(--radius-pill);
                 background: var(--color-surface-2); color: var(--color-text-muted);
                 font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* ---- Detail klienta: dvousloupcový layout ----------------------- */
.grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 980px) { .grid2 { grid-template-columns: 1fr; } }

/* ---- Formulářová mřížka (2 sloupce) ----------------------------- */
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.formgrid .field { margin-bottom: 0; }
.formgrid .field--full { grid-column: 1 / -1; }
.formgrid__sect { grid-column: 1 / -1; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); margin-top: var(--sp-2); }
@media (max-width: 560px) { .formgrid { grid-template-columns: 1fr; } }

/* ---- Formulář smluv: rozestup mezi řádky polí ------------------- */
/* .formgrid sama o sobě nemá spodní okraj, takže dva řádky pod sebou jsou
   nalepené. Ve formuláři smluv přidáme mezeru mezi navazujícími řádky. */
.contractform .formgrid { margin-bottom: var(--sp-4); }

/* Zvýrazněné (warning) pole smlouvy – lze použít, ale je třeba zvážit.
   Celý řádek dostane jemné varovné pozadí/rámeček, popisek je menší. */
.field.cc-field--warn {
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
}
.field.cc-field--warn .field__label {
  font-size: var(--fs-xs);
  color: var(--color-warning-text);
  font-weight: var(--fw-semibold);
}
.field.cc-field--warn .hint { color: var(--color-warning-text); }

/* Cena + „popis na faktuře": cena vlevo (úzký sloupec), popis vpravo (roste).
   Companion popis říká, jak se položka zobrazí na faktuře (výchozí = název). */
.cc-priced {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
.cc-priced .input-group { width: 100%; }
@media (max-width: 560px) { .cc-priced { grid-template-columns: 1fr; } }

/* ---- Hezčí tlačítko výběru souboru ----------------------------- */
.input--file { height: auto; padding: var(--sp-2) var(--sp-3); cursor: pointer; line-height: 1.5; }
.input--file::file-selector-button {
  margin-right: var(--sp-3); padding: 6px 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-2); color: var(--color-text);
  font: inherit; font-weight: var(--fw-medium); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.input--file::file-selector-button:hover {
  background: var(--color-brand-soft); border-color: var(--color-brand); color: var(--color-brand-text);
}

/* ---- Řádek se zaškrtávátkem ------------------------------------- */
.checkrow { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: var(--fs-sm); cursor: pointer; }
.checkrow input { margin-top: 3px; flex: none; }
.checkrow.is-disabled { opacity: .5; cursor: not-allowed; }

/* ---- Key/value řádky (souhrn) ----------------------------------- */
.kv { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 7px 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.kv:last-child { border-bottom: 0; }
.kv__k { color: var(--color-text-muted); }
.kv__v { font-weight: var(--fw-medium); text-align: right; }

/* ---- Flash zprávy (PRG) ----------------------------------------- */
.flash { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); margin-bottom: var(--sp-4); font-size: var(--fs-sm); border-left: 4px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); }
/* Odkaz ve flash hlasce - kam se ma clovek prokliknout, patri primo do ni.
   `margin-left:auto` ho drzi u praveho okraje, at neskace podle delky textu. */
.flash__link { margin-left: auto; white-space: nowrap; font-weight: 600; color: inherit; text-decoration: underline; }
.flash__link:hover { text-decoration: none; }
.flash__form { display: inline; margin: 0 0 0 auto; }
.flash__btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.flash--success { border-left-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success-text); }
.flash--danger  { border-left-color: var(--color-danger);  background: var(--color-danger-soft);  color: var(--color-danger-text); }
.flash--warning { border-left-color: var(--color-warning); background: var(--color-warning-soft); color: var(--color-warning-text); }
.flash--info    { border-left-color: var(--color-brand);   background: var(--color-brand-soft);   color: var(--color-brand-text); }
/* Standard UI S3: .flash je JEDINÁ výstraha – hláška po akci, výstraha stránky
   i výstraha v kartě (--inline). Ikona vlevo, text, volitelně .flash__link vpravo. */
.flash > svg { flex: none; }
.flash__text { min-width: 0; }
.flash__text code { font-size: var(--fs-xs); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 0 4px; margin: 2px 4px 0 0; display: inline-block; color: var(--color-text); }
.flash__list { display: flex; flex-wrap: wrap; margin-top: var(--sp-1); }
.flash--inline { margin-bottom: 0; box-shadow: none; }

.field.is-disabled { opacity: .5; }

/* @deprecated → .flash.flash--warning (standard UI S3); modulová výstraha mimo Cockpit, převod v docs/ui-standard-backlog.md.
   Doporučení vyplnit M365 Tenant ID / doménu (objednávání) – žluté upozornění. */
.m365warn {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  background: var(--color-warning-soft); color: var(--color-warning-text);
  border: 1px solid var(--color-warning); border-radius: var(--radius-sm);
  padding: var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-sm); line-height: 1.5;
}
.m365warn svg { flex: none; margin-top: 2px; }

/* Input s pevnou příponou (např. doména …{.onmicrosoft.com}) – jako legacy. */
.input-group { display: flex; align-items: stretch; }
.input-group > .input { flex: 1 1 auto; width: auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group__suffix {
  display: inline-flex; align-items: center; white-space: nowrap;
  height: var(--control-h); padding: 0 var(--sp-3);
  background: var(--color-surface-2); color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-sm);
}

/* ---- Klientský portál: uživatelé kontaktu (contact_users) ---------------- */
.card__foot {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--color-border);
}
.pu-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; align-items: center; }
.pu-actions--start { justify-content: flex-start; }
.pu-actions form { display: inline; margin: 0; }
.btn--ghost-danger { color: var(--color-danger-text); }
.btn--ghost-danger:hover { background: var(--color-danger-soft); }

/* Login-method odznáčky na detailu uživatele klientského portálu. */
.loginbadges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Panel s jednorázovým odkazem (aktivace / reset hesla) – kopírovatelný. */
.linkpanel {
  background: var(--color-brand-soft); border: 1px solid var(--color-brand);
  border-radius: var(--radius-md); padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.linkpanel__head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.linkpanel__icon { color: var(--color-brand-text); flex: none; margin-top: 2px; }
.linkpanel__title { font-weight: var(--fw-semibold); margin: 0 0 2px; }
.linkpanel__note { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }
.linkpanel__row { display: flex; gap: var(--sp-2); align-items: stretch; }
.linkpanel__url { flex: 1 1 auto; font-family: var(--font-mono, monospace); font-size: var(--fs-sm); }
@media (max-width: 639px) { .linkpanel__row { flex-direction: column; } }

/* Picker pro přidání API integrace v hlavičce karty (select + tlačítko na 1 řádku). */
.api-add { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: nowrap; }
.api-add .select { min-width: 200px; }
.api-add .btn { white-space: nowrap; flex: none; }

/* Jen-pro-čtení obal (detail vlastní firmy partnera) – reset nativního fieldsetu;
   prvky uvnitř jsou disabled (nativně), karty zůstávají vizuálně beze změny. */
.ro-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ro-fieldset:disabled { opacity: .75; }

/* Editor API integrace – poměr stran: hlavní část menší, oprávnění širší. */
.api-edit-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 980px) { .api-edit-grid { grid-template-columns: 1fr; } }

/* ---- Branding – loga kontaktu (tab Branding, dle mockupu logo-slot) ---- */
.logo-slot { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-4); align-items: start; padding: var(--sp-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--sp-3); }
.logo-slot.is-branding { border-color: var(--color-warning); }
.logo-slot.is-default { border-color: var(--color-success); }
.logo-slot:last-child { margin-bottom: 0; }
.logo-prev { height: 96px; display: flex; align-items: center; justify-content: center; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; padding: var(--sp-2); }
.logo-prev img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.logo-prev--none { border: 1px dashed var(--color-border-strong); color: var(--color-text-subtle); font-size: var(--fs-xs); text-align: center; }
.logo-slot__body { min-width: 0; }
.logo-slot__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); word-break: break-word; }
.logo-slot__badges { display: inline-flex; gap: var(--sp-1); flex-wrap: wrap; margin-left: var(--sp-2); }
.logo-slot__meta { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.5; margin: var(--sp-1) 0 var(--sp-2); }
.logo-slot__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.logo-slot__actions form { display: inline; margin: 0; }
.logo-slot details > summary { cursor: pointer; font-size: var(--fs-xs); color: var(--color-brand-text); margin-top: var(--sp-2); }
.logo-slot details .field { margin-top: var(--sp-2); }

/* ---- Vlastní doména – DNS A záznam (tab Branding) ---------------------- */
.dns-rec { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; }
.dns-rec__k { font-size: var(--fs-xs); color: var(--color-text-muted); margin-right: 2px; text-transform: uppercase; letter-spacing: .03em; }
.dns-rec code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px 6px; }

/* ---- Rozbalovací skupina v sidebaru (Uživatelé a role) -------------------- */
/* F2: `font: inherit` by přepsal --fs-sm z .navitem na --fs-base (skupiny měly větší písmo). */
.navitem--group { width: 100%; background: none; border: 0; text-align: left; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.navitem .chev { margin-left: auto; width: 14px; height: 14px; transition: transform .15s; }
.navitem--group.is-open .chev { transform: rotate(90deg); }
.subitems { display: none; flex-direction: column; gap: 1px; margin: 1px 0 var(--sp-2); padding-left: calc(18px + var(--sp-3)); }
.navitem--group.is-open + .subitems { display: flex; }
.subitem { display: block; padding: 6px var(--sp-3); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--fs-sm); border-left: 2px solid var(--color-border); margin-left: 6px; text-decoration: none; }
.subitem:hover { background: var(--color-surface-2); color: var(--color-text); }
.subitem.is-active { color: var(--color-brand-text); font-weight: var(--fw-medium); border-left-color: var(--color-brand); }
.navgroup { position: relative; }
.subitems__title { display: none; }

/* ---- Sbalené menu (ikony) – standard UI S7, F1/F3 ------------------------
   Všechny selektory jsou zúžené na `.sidebar` (F1): panel pracovního prostoru
   je uvnitř stejné `.app` a popisky ztratit nesmí. Jen desktop – na mobilu je
   menu off-canvas a sbalení nemá smysl. */
@media (min-width: 900px) {
  .app.is-collapsed .sidebar .nav-section,
  .app.is-collapsed .sidebar .navitem__label,
  .app.is-collapsed .sidebar .navitem__badge,
  .app.is-collapsed .sidebar .chev { display: none; }
  .app.is-collapsed .sidebar .navitem { justify-content: center; padding: 0; }
  /* Vysunovací panel nesmí oříznout scroll kontejner menu. */
  .app.is-collapsed .sidebar__nav { overflow: visible; }
  /* F3: podpoložky skupiny = vysunovací panel vedle ikony (hover i focus). */
  .app.is-collapsed .sidebar .subitems,
  .app.is-collapsed .sidebar .navitem--group.is-open + .subitems { display: none; }
  .app.is-collapsed .sidebar .navgroup:hover > .subitems,
  .app.is-collapsed .sidebar .navgroup:focus-within > .subitems {
    display: flex; position: absolute; left: 100%; top: 0; z-index: calc(var(--z-dropdown) - 1);
    min-width: 220px; margin: 0; padding: var(--sp-2);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  }
  .app.is-collapsed .sidebar .navgroup[data-flyout-closed] > .subitems { display: none; }
  .app.is-collapsed .sidebar .subitems__title {
    display: block; padding: var(--sp-1) var(--sp-3) var(--sp-2);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text);
  }
  .app.is-collapsed .sidebar .subitem { margin-left: 0; }
}

/* ---- Globální vyhledávání v horní liště (gsearch) --------------------------- */
.gsearch { position: relative; flex: 1; max-width: 520px; margin: 0 var(--sp-3); }
.gsearch__input {
  width: 100%; height: 38px; padding: 0 64px 0 36px; font-size: var(--fs-sm);
  color: var(--color-text); background: var(--color-surface-2);
  border: 1px solid transparent; border-radius: var(--radius-pill);
}
.gsearch__input::placeholder { color: var(--color-text-subtle); }
.gsearch__input:focus { outline: none; background: var(--color-surface); border-color: var(--color-border-strong); box-shadow: 0 0 0 3px var(--color-brand-soft); }
.gsearch__i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-subtle); display: flex; }
.gsearch__kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: var(--fw-medium) var(--fs-xs)/1 var(--font-sans); color: var(--color-text-subtle); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; padding: 3px 6px; }
.gsearch__panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 70vh; overflow-y: auto; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--sp-2); z-index: var(--z-dropdown);
}
.gsearch__panel[hidden] { display: none; }
.gsearch__group { padding: var(--sp-1) var(--sp-2); }
.gsearch__gtitle { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: var(--fw-semibold); padding: var(--sp-1) var(--sp-2); }
.gsearch__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; }
.gsearch__item:hover, .gsearch__item.is-active { background: var(--color-brand-soft); }
.gsearch__item svg { width: 16px; height: 16px; color: var(--color-text-muted); flex: none; }
.gsearch__txt { display: flex; flex-direction: column; min-width: 0; }
.gsearch__lbl { font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch__meta { font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch__empty { padding: var(--sp-3); color: var(--color-text-muted); font-size: var(--fs-sm); text-align: center; }
@media (max-width: 760px) { .gsearch { display: none; } }

/* ---- Loading bar (nahoře, během AJAX) -------------------------------------- */
.toploading { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 600; overflow: hidden; background: var(--color-brand-soft); }
.toploading[hidden] { display: none; }
.toploading::before { content: ""; position: absolute; top: 0; height: 100%; width: 35%; background: var(--color-brand); border-radius: 0 3px 3px 0; animation: tl 1.1s ease-in-out infinite; }
@keyframes tl { 0% { left: -35%; } 50% { left: 45%; } 100% { left: 100%; } }

/* ---- Toolbox (appsmenu vedle zvonečku) ------------------------------------- */
.appsmenu { position: relative; }
.appsmenu__panel { min-width: 230px; }
.appsmenu__empty { padding: var(--sp-2) var(--sp-3); color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }
.appsmenu__cfg { font-size: var(--fs-xs); color: var(--color-text-subtle); padding: var(--sp-1) var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }

/* ---- Našeptávač firem z registru (ARES/ORSR) ------------------------------- */
[data-reg-anchor] { position: relative; }
.reg-hint { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.reg-hint--ok { color: var(--color-success-text); }
.reg-hint--muted { color: var(--color-text-subtle); }
.reg-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: var(--z-dropdown);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--sp-1);
  max-height: 320px; overflow-y: auto;
}
.reg-suggest[hidden] { display: none; }
.reg-suggest__item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-3); border: 0; background: none; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--color-text); font: inherit;
}
.reg-suggest__item:hover, .reg-suggest__item.is-active { background: var(--color-brand-soft); }
.reg-suggest__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.reg-suggest__meta { font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Notifikace kontaktu: matice událost × kanál -------------------------- */
.notif-grid { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.notif-grid th,
.notif-grid td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--color-border); text-align: left; }
.notif-grid th { background: var(--color-surface-2); color: var(--color-text-muted); font-weight: var(--fw-semibold); border-top: 0; }
.notif-grid td.c, .notif-grid th.c { text-align: center; width: 118px; }
.notif-grid tbody tr:hover { background: var(--color-surface-2); }
.notif-grid input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-brand); }
.notif-grid input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .6; }
.notif-grid tr.is-soon td:first-child strong { color: var(--color-text-muted); font-weight: var(--fw-medium); }
.notif-grid tr.is-soon .badge--soon { margin-left: var(--sp-2); }
.badge--soon { background: var(--color-surface-2); color: var(--color-text-muted); border: 1px dashed var(--color-border); }
/* Vlastní příjemci události: adresa + tužka v posledním sloupci a rozbalovací řádek. */
.notif-grid td .nr-val { margin-right: var(--sp-2); }
.notif-grid td .iconbtn--xs { vertical-align: middle; }
.notif-grid tr.nr-edit { background: var(--color-surface-2); }
.notif-grid tr.nr-edit:hover { background: var(--color-surface-2); }
.notif-grid tr.nr-edit > td { padding-top: var(--sp-2); padding-bottom: var(--sp-3); border-top: 0; }
.nr-edit__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); flex-wrap: wrap; }
.nr-edit__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.input.is-invalid { border-color: var(--color-danger); }
/* Checkbox + ovládací ikona v jedné buňce kanálu. Pevná mřížka (ne inline-flex):
   šířka buňky pak nezávisí na tom, jestli řádek ikonu má, takže zaškrtávátka
   všech řádků stojí přesně nad sebou. Prázdný .nc-slot drží druhý sloupec. */
.nc-cell { display: inline-grid; grid-template-columns: 18px 26px; align-items: center; gap: var(--sp-2); }
.nc-cell > input[type="checkbox"] { justify-self: center; }
.nc-slot { display: block; width: 26px; height: 26px; }
/* Souhrn publika zvonečku pod adresou ve sloupci „Příjemci". */
.nr-sub { display: block; font-size: var(--fs-xs); color: var(--color-text-subtle); margin-top: 2px; }
/* Výběr publika zvonečku. */
.nb-opts { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.nb-opt { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.nb-users { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-1) 0 0 var(--sp-5); max-height: 220px; overflow-y: auto; }
.nb-user { display: flex; align-items: baseline; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-sm); }
.nb-user__mail { color: var(--color-text-subtle); font-size: var(--fs-xs); }

/* ---- Správa e-mailových šablon (Administrace → Šablony) -------------------- */
.select--sm { height: auto; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); min-width: 200px; }
.tpl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.tpl-toolbar__sep { width: 1px; align-self: stretch; background: var(--color-border); margin: 0 var(--sp-1); }
.tpl-code {
  width: 100%; box-sizing: border-box; min-height: 460px; resize: vertical;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 13px; line-height: 1.55; tab-size: 2;
  padding: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); white-space: pre;
}
.tpl-code:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-soft); }
.tpl-code--sm { min-height: 0; white-space: pre-wrap; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tpl-chip {
  border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text);
  border-radius: var(--radius-pill); padding: 2px 10px; font-size: var(--fs-xs);
  font-family: var(--font-mono, monospace); cursor: pointer;
}
.tpl-chip:hover { background: var(--color-brand-soft); border-color: var(--color-brand); }
.tpl-codeline { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.tpl-preview { width: 100%; height: 520px; border: 0; background: #fff; display: block; }
.tpl-proj { padding: var(--sp-4) 0; border-top: 1px solid var(--color-border); }
.tpl-proj:first-child { padding-top: 0; border-top: 0; }
.tpl-proj__head { margin-bottom: var(--sp-3); }

/* ── PAX8 objednávky (Pax8Orders) ───────────────────────────────────────── */
.page-head__aside { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end; }
.page-head__meta { font-size: var(--fs-sm); }
.inline-form { display: inline; margin: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.block-sub { display: block; font-size: var(--fs-xs); }
.link--back { display: inline-block; margin-bottom: var(--sp-2); }
.link--muted { color: var(--color-text-muted); cursor: default; text-decoration: none; }
.link--muted:hover { text-decoration: none; }
/* Definiční seznam (souhrn detailu) */
.deflist { display: grid; gap: 0; }
.deflist__row { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--color-border); }
.deflist__row:first-child { border-top: 0; }
.deflist dt { color: var(--color-text-muted); font-size: var(--fs-sm); }
.deflist dd { margin: 0; }
@media (max-width: 640px) { .deflist__row { grid-template-columns: 1fr; gap: var(--sp-1); } }

/* ---- Řádek ikon-akcí v tabulkách (kompaktní) ------------------------------ */
.iconbar { display: inline-flex; flex-wrap: nowrap; gap: var(--sp-1); justify-content: flex-end; align-items: center; }
.iconbar form { display: inline; margin: 0; }
.btn--icon { padding: 0; width: var(--control-h-sm); flex: 0 0 auto; }
.btn--icon.btn--sm { width: var(--control-h-sm); }
.btn--icon svg { display: block; }
.btn--icon.is-off { color: var(--color-text-subtle); }
.btn--icon.is-off:hover { color: var(--color-brand-text); }

/* ---- Stavová tečka (light design – status dot místo badge) ---------------- */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: var(--sp-2, .5rem);
  vertical-align: middle;
  background: var(--color-text-muted);
}
.status-dot.is-ok      { background: var(--color-success); }
.status-dot.is-info    { background: var(--color-info); }
.status-dot.is-warn    { background: var(--color-warning); }
.status-dot.is-muted   { background: var(--color-border-strong); }
.status-dot.is-neutral { background: var(--color-text-muted); }
.status-dot.is-danger  { background: var(--color-danger); }

/* Inline spinner (busy stav tlačítka) */
.spinner { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: pp-spin .6s linear infinite; }
.btn.is-busy { opacity: .85; cursor: progress; }
/* Větší varianta téže animace (blokující overlay) – žádná další animace (S6). */
.spinner--lg { width: 32px; height: 32px; border-width: 3px; margin: 0 auto var(--sp-3); display: block; }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ---- Stavový „pill" v záhlaví detailu --------------------------- */
.status-pill { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); white-space: nowrap; }

/* ---- Modal (native <dialog>) ----------------------------------- */
.modal { border: none; padding: 0; background: transparent; max-width: 460px; width: calc(100% - var(--sp-6)); }
.modal--wide { max-width: 680px; }
.modal::backdrop { background: rgba(15, 23, 32, .45); }
.modal__box {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden;
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border);
}
.modal__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.modal__x { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1;
  color: var(--color-text-muted); padding: 0 var(--sp-1); }
.modal__x:hover { color: var(--color-text); }
.modal__body { padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--color-border); }
.modal__check { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
.modal__check input { margin-top: 2px; flex: none; }
/* pre-line: chybové hlášky poskytovatele jsou víceřádkové (vysvětlení + kontext
   + doslovná odpověď + korelační kódy) a vkládají se přes textContent. */
.modal__alert { font-size: var(--fs-sm); color: var(--color-danger-text);
  background: var(--color-danger-soft); border-radius: var(--radius-sm); padding: var(--sp-3);
  white-space: pre-line; overflow-wrap: anywhere; }
.modal__notice { font-size: var(--fs-sm); border-radius: var(--radius-sm); padding: var(--sp-3); }
.modal__notice--warn { color: var(--color-warning-text); background: var(--color-warning-soft); }

/* ── PAX8 produkty (Pax8Products) ────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--sp-5); align-items: start; }
.grid-2__main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.grid-2__side { min-width: 0; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

.buybox__form .field { margin-bottom: var(--sp-3); }
/* Velká textarea pro plný (markdown) popis produktu */
.desc-full { min-height: 460px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5; }
.buybox__price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) 0; margin: var(--sp-2) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.buybox__price strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.buybox__actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.buybox__actions .btn { width: 100%; justify-content: center; }
.buybox__note { font-size: var(--fs-xs); margin-top: var(--sp-2); }
.field--qty { max-width: 140px; }

/* Zvýrazněný objednávkový box (BOX 1) – akcentovaný rámeček + jemné pozadí + horní lišta */
.buybox--order { border: 1.5px solid var(--color-brand); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.buybox--order::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--color-brand); }
.buybox--order > .card__head { background: var(--color-brand-soft); border-bottom: 1px solid var(--color-border); }
.buybox--order > .card__head .card__title { color: var(--color-brand-text); }

/* Sbalitelná karta (<details>) – hlavička jako klikací summary s indikátorem */
/* Karta „plánu" nad běžným seznamem – budoucí položky, které u dodavatele
   ještě neexistují (naplánované objednávky PAX8). Barevný pruh vlevo je jediný
   rozdíl, ať se plán vizuálně nemíchá se skutečnými daty pod ním. */
.card--accent { border-left: 3px solid var(--color-brand); }
.card--accent .card__title { display: flex; align-items: center; gap: var(--sp-2); }

.card--fold > summary.card__head { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); list-style: none; user-select: none; }
.card--fold > summary.card__head::-webkit-details-marker { display: none; }
.card--fold > summary.card__head:hover { background: var(--color-surface-2, var(--color-brand-soft)); }
.card__fold-ind { display: inline-flex; color: var(--color-text-muted); transition: transform .15s ease; }
.card--fold[open] > summary .card__fold-ind { transform: rotate(180deg); }

.prose { line-height: 1.6; }
.prose--bullets { margin-top: var(--sp-3); }
/* Vykreslený Markdown (read-only popis produktu apod.). */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 var(--sp-3); }
.prose h4 { font-size: var(--fs-md); font-weight: var(--fw-semibold, 600); margin: var(--sp-4) 0 var(--sp-2); }
.prose h5 { font-size: var(--fs-sm); font-weight: var(--fw-semibold, 600); margin: var(--sp-3) 0 var(--sp-2); }
.prose ul, .prose ol { margin: 0 0 var(--sp-3); padding-left: 1.4em; }
.prose li { margin: 0 0 var(--sp-1); }
.prose a { color: var(--color-brand-text); text-decoration: underline; }
.prose code { background: var(--color-surface-2); border-radius: var(--radius-sm); padding: .1em .35em; font-size: .92em; }

/* Read-only náhled popisu produktu (jen jazyk uživatele). */
.descview__lead { font-size: var(--fs-md); color: var(--color-text); margin: 0 0 var(--sp-4); }
.descview__full { color: var(--color-text); }
.descview__bullets { margin-top: var(--sp-2); }
.descview__vendor { margin: var(--sp-4) 0 0; }
.subhead { font-size: var(--fs-sm); font-weight: var(--fw-semibold, 600); margin: var(--sp-4) 0 var(--sp-2);
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.subhead:first-child { margin-top: 0; }
.linklist { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.linklist li { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.check--inline { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.text-danger { color: var(--color-danger-text); }
.row-actions { white-space: nowrap; text-align: right; }
.is-struck { text-decoration: line-through; }

/* PAX8 products – doplňky */
.badge--brand { background: var(--color-brand-soft); color: var(--color-brand-text); }
.form-actions { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }

/* ── Cenové nabídky (Proposals) ──────────────────────────────────────────── */
.input--mini { width: 84px; height: var(--control-h-sm); padding: 0 var(--sp-2); text-align: right; }
.checkrow, .radiorow { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.copyrow { display: flex; gap: var(--sp-2); align-items: center; }
.copyrow .input { flex: 1; min-width: 0; }

/* Veřejný / náhledový dokument nabídky */
.proposal-page { background: var(--color-surface-2); }
.proposal-doc { padding: var(--sp-5) var(--sp-4); }
.proposal-previewbar { max-width: 820px; margin: 0 auto var(--sp-4); display: flex; justify-content: space-between;
  align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--color-warning-soft);
  color: var(--color-warning-text); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.proposal-sheet { max-width: 820px; margin: 0 auto; background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--sp-6, 32px) var(--sp-6, 32px); }
.proposal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4);
  padding-bottom: var(--sp-4); border-bottom: 2px solid var(--color-border); margin-bottom: var(--sp-4); }
.proposal-logo { max-height: 64px; max-width: 220px; width: auto; }
.proposal-brandname { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.proposal-head__meta { text-align: right; }
.proposal-title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin: 0; }
.proposal-name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 2px 0; }
.proposal-parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.proposal-party__lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin: 0 0 var(--sp-2); }
.proposal-text { margin: var(--sp-4) 0; line-height: 1.6; }
.proposal-items { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: var(--fs-sm); }
.proposal-items th, .proposal-items td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--color-border); text-align: left; }
.proposal-items th { color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.proposal-items .num { text-align: right; font-variant-numeric: tabular-nums; }
.proposal-items tfoot td { border-top: 2px solid var(--color-border); border-bottom: none; padding-top: var(--sp-3); }
.proposal-curnote { font-size: var(--fs-xs); }
.proposal-foot { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); text-align: center; }
@media (max-width: 560px) { .proposal-parties { grid-template-columns: 1fr; } .proposal-head { flex-direction: column; } .proposal-head__meta { text-align: left; } }

/* Proposals – grayed disabled check/radio rows + supplier-less parties */
.check--inline.is-disabled { opacity: .5; }
.check--inline .link { margin-left: 4px; }
.proposal-parties--single { grid-template-columns: 1fr; }

/* ── PAX8 companies: loading overlay (živé API načítání) ───────────────── */
.pax8-overlay{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--sp-3,12px);
  background:rgba(255,255,255,.72);backdrop-filter:blur(2px)}
[data-theme="dark"] .pax8-overlay{background:rgba(17,19,24,.74)}
.pax8-overlay__spinner{width:42px;height:42px;border:4px solid var(--color-border);
  border-top-color:var(--color-brand);border-radius:50%;animation:pax8spin .8s linear infinite}
.pax8-overlay__text{font-weight:var(--fw-bold,600);color:var(--color-text)}
@keyframes pax8spin{to{transform:rotate(360deg)}}
/* Neurčitý progress bar (CSP split overlay) – „systém pracuje" */
.csp-progress{width:220px;height:4px;border-radius:2px;overflow:hidden;
  background:var(--color-border)}
.csp-progress>span{display:block;height:100%;width:40%;border-radius:2px;
  background:var(--color-brand);animation:cspbar 1.1s ease-in-out infinite}
@keyframes cspbar{0%{margin-left:-40%}100%{margin-left:100%}}
/* CSP split – neplatný řádek (součet ≠ množství na faktuře) + skupina */
.csp-invalid td{background:rgba(220,53,69,.10)}
.csp-invalid .input{border-color:var(--color-danger)}
.csp-group-head td{background:var(--color-surface-2,#f6f8fa)}

/* Proposals – širší pravý sloupec + utility */
.grid-2--wideside { grid-template-columns: minmax(0,1fr) 420px; }
@media (max-width: 900px) { .grid-2--wideside { grid-template-columns: 1fr; } }
.nowrap { white-space: nowrap; }

/* Zvýrazněné texty před/za položkami */
.proposal-textblock { background: var(--color-surface-2); border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; line-height: 1.6; }
.proposal-textblock--after { margin-top: var(--sp-5); }

/* Veřejný dokument – nadpisy měnových tabulek, popisy produktů, VAT pozn. */
.proposal-curhead { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-muted); margin: var(--sp-5) 0 var(--sp-2); }
.proposal-vatnote { font-size: var(--fs-xs); margin-top: var(--sp-2); }
.proposal-details { margin-top: var(--sp-5); border-top: 1px solid var(--color-border); padding-top: var(--sp-3); }
.proposal-detail { margin: var(--sp-4) 0; }
.proposal-detail__name { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.proposal-bullets { margin: var(--sp-2) 0; padding-left: var(--sp-5); }
.proposal-bullets li { margin: 2px 0; }
.proposal-detail__full { line-height: 1.6; }

/* Proposals – souhrn cen (bez slevy / sleva / celkem bez DPH) */
.proposal-totals { margin: var(--sp-3) 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.proposal-totals--card { padding: 0 var(--sp-5) var(--sp-3); }
.proposal-totals__row { display: flex; gap: var(--sp-5); justify-content: space-between; min-width: 300px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.proposal-totals__row span { color: var(--color-text-muted); }
.proposal-totals__row--grand { border-top: 2px solid var(--color-border); margin-top: 4px; padding-top: 6px; font-size: var(--fs-md); }
.proposal-totals__row--grand span, .proposal-totals__row--grand strong { color: var(--color-text); }

/* `.field { display:grid }` přebíjí UA pravidlo [hidden] → bez tohoto se pole
   skrytá atributem hidden (např. CZK kurz/příplatek) stále zobrazují. */
.field[hidden] { display: none !important; }

/* ── pp-tenantcheck (kontrola dostupnosti M365 tenantu) ─────────────────── */
.tc-inputrow { display: flex; align-items: stretch; }
.tc-inputrow .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tc-suffix {
  display: inline-flex; align-items: center; padding: 0 var(--sp-3);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-left: 0; border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm);
  color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--fs-sm); white-space: nowrap;
}
.tc-result {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface-2); font-size: var(--fs-sm);
}
.tc-result__meta { margin-top: var(--sp-1); color: var(--color-text-muted); font-size: var(--fs-xs); }
.tc-result--checking { color: var(--color-text-muted); }
.tc-result--free  { border-color: var(--color-success); background: var(--color-success-soft); }
.tc-result--taken { border-color: var(--color-danger);  background: var(--color-danger-soft); }
.tc-result--unknown,
.tc-result--error { border-color: var(--color-warning); background: var(--color-warning-soft); }
.tc-keybox {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3); background: var(--color-surface-2); border-radius: var(--radius-sm);
}
.tc-keybox code { font-family: var(--font-mono); font-size: var(--fs-sm); word-break: break-all; user-select: all; }
.tc-code {
  margin: 0 0 var(--sp-3); padding: var(--sp-3); background: var(--color-surface-2);
  border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--fs-xs);
  white-space: pre-wrap; word-break: break-all;
}

/* Ceny v nabídce se nesmí lámat na víc řádků (mezera tisíců + kód měny). */
.proposal-items .num { white-space: nowrap; }

/* Indikátory zapojených služeb v seznamu klientů (PAX / iDoklad / Freshdesk). */
.svcs { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; }
.svc {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-sm); white-space: nowrap; color: var(--color-text);
}
.svc svg { width: 14px; height: 14px; flex: 0 0 auto; }
.svc--off { color: var(--color-text-muted); opacity: .6; }
.svc--off svg { opacity: .7; }
.svc__l { line-height: 1; }
/* Stav integrace v souhrnu (dot + text) – tečka + popisek vpravo v .kv řádku. */
.svc-stat { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* Varování u pole (např. CZK příplatek se liší od smlouvy) */
.field__warn { display: block; font-size: var(--fs-xs); color: var(--color-warning-text); margin-top: 2px; }
.field__warn[hidden] { display: none; }

/* Druhý měnový souhrn (CZK) v editaci nabídky */
.proposal-totals + .proposal-totals { border-top: 1px solid var(--color-border); padding-top: var(--sp-3); margin-top: var(--sp-2); }
.proposal-totals__cur { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 2px; }
.proposal-totals[hidden] { display: none !important; }

/* ── Redesign nabídky „Varianta 1 – Formulář" (detail + editor) ─────────────
   Boxovaný, vpravo zarovnaný cenový souhrn (signatura návrhu). Zachovává
   stávající .proposal-totals hooky ([data-form-*], [data-czk-totals]). */
.proposal-totals-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) 0; }
.proposal-totals.proposal-totals--box {
  width: 340px; max-width: 100%; margin: 0; gap: var(--sp-2);
  align-items: stretch;                 /* řádky přes celou šířku boxu */
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5);
}
.proposal-totals.proposal-totals--box + .proposal-totals.proposal-totals--box { border-top: 0; margin-top: 0; padding-top: var(--sp-4); }
.proposal-totals--box .proposal-totals__row { min-width: 0; gap: var(--sp-4); }
.proposal-totals--box .proposal-totals__cur {
  text-align: right; font-weight: var(--fw-bold); color: var(--color-text-subtle);
  letter-spacing: .05em; margin-bottom: var(--sp-2);
}
.proposal-totals--box .proposal-totals__row--grand { font-size: var(--fs-md); border-top-width: 2px; padding-top: var(--sp-3); margin-top: var(--sp-2); }
.proposal-totals--box .proposal-totals__row--grand strong { font-weight: var(--fw-bold); font-size: var(--fs-lg); }

/* Uvozující štítek u zvýrazněných textů před/za položkami (detail). */
.proposal-textblock__label { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .05em; color: var(--color-brand-text); margin-bottom: var(--sp-1); }
.proposal-textblock p { margin: 0; }

/* Kompaktní souhrn nastavení v pravém sloupci detailu (label … hodnota). */
.prop-summary { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; }
.prop-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); font-size: var(--fs-sm); }
.prop-summary__row dt { color: var(--color-text-muted); margin: 0; }
.prop-summary__row dd { margin: 0; font-weight: var(--fw-semibold); text-align: right; }

/* Počítadlo položek jako brandový „pill" v hlavičce karty. */
.card__count--pill { background: var(--color-brand-soft); color: var(--color-brand-text);
  font-weight: var(--fw-semibold); padding: 3px var(--sp-3); border-radius: var(--radius-pill); }

/* Sleva v cenovém souhrnu zvýrazněná červeně (jako v návrhu). */
.proposal-totals__row--discount strong { color: var(--color-danger-text); }
/* Vystředěné akce formuláře nabídky (Uložit + Zpět). */
.form-actions--center { justify-content: center; }

/* ---- Ceníky kontaktu (contact_pricelists / detail) ----------------------- */
/* Prefix v input-group (např. „." před TLD) – zrcadlí .input-group__suffix. */
.input-group__prefix {
  display: inline-flex; align-items: center; white-space: nowrap;
  height: var(--control-h); padding: 0 var(--sp-3);
  background: var(--color-surface-2); color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-size: var(--fs-sm);
}
.input-group > .input-group__prefix + .input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* Kompaktní varianta input-group + vstupů v tabulce položek. */
.input-group--sm .input,
.input-group--sm .input-group__suffix,
.input-group--sm .input-group__prefix { height: var(--control-h-sm, 32px); font-size: var(--fs-sm); }
.input--sm, .select--sm { height: var(--control-h-sm, 32px); padding: 0 var(--sp-2); font-size: var(--fs-sm); }
#pl-table td .input,
#pl-table td .select { min-width: 90px; }
#pl-table td[data-label="Cena"] .input,
#pl-table td .input[type="number"] { text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Našeptávač produktů PAX8 (absolutní panel pod vyhledávacím polem). */
.pl-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  margin-top: 2px; max-height: 260px; overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,.12));
}
.pl-suggest[hidden] { display: none; }
.pl-suggest__item {
  display: block; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm);
  color: var(--color-text); text-decoration: none; cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}
.pl-suggest__item:last-child { border-bottom: 0; }
.pl-suggest__item:hover { background: var(--color-brand-soft); }

/* iDoklad faktury – víceřádkové texty (poznámka, texty před/za položkami) */
.prewrap{white-space:pre-wrap;margin:.25rem 0 0;color:var(--text,#1c2230)}
/* Varování „cena pod doporučenou (GPL)" v editoru PAX8 položek. */
.pl-warn {
  display: block; margin-top: 4px; font-size: var(--fs-xs);
  color: var(--color-danger-text); white-space: normal;
}
.pl-warn[hidden] { display: none; }
.pl-warn svg { vertical-align: -2px; }

/* ======================================================================
   Dashboard (přehled) – metriky, pozornost, aktivita, rychlé akce.
   ====================================================================== */
/* Horní upozornění (faktury po splatnosti apod.). */
.dash-alert {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  border-radius: var(--radius-sm); font-size: var(--fs-sm);
  background: var(--color-danger-soft); color: var(--color-danger-text);
}
.dash-alert svg { width: 18px; height: 18px; flex: none; }
.dash-alert a { margin-left: auto; font-weight: var(--fw-medium); text-decoration: underline; white-space: nowrap; }

/* Dlaždice s metrikami – „fancy" KPI karty (ikona v dlaždici + velké číslo). */
.dash-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3); margin-bottom: var(--sp-5);
}
.dash-metric {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--sp-4); color: inherit; text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.dash-metric, .dash-metric:hover, .dash-metric a { text-decoration: none; }
a.dash-metric:hover {
  border-color: var(--color-border-strong); box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.dash-metric__lbl {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-text-muted);
}
.dash-metric__ico {
  width: 32px; height: 32px; border-radius: var(--radius-md); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-2); color: var(--color-text-muted);
}
.dash-metric__ico svg { width: 17px; height: 17px; }
.dash-metric__val {
  font-size: 2rem; font-weight: var(--fw-bold); color: var(--color-text);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.dash-metric__val .unit { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text-subtle); }
.dash-metric__sub { font-size: var(--fs-xs); color: var(--color-text-muted); }
.dash-metric__sub.is-danger { color: var(--color-danger-text); font-weight: var(--fw-medium); }
@media (max-width: 980px) { .dash-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dash-metrics { grid-template-columns: 1fr; } }

/* „Vyžaduje pozornost" – řádky s ikonou. */
.dash-att {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm); color: inherit; text-decoration: none;
}
.dash-att:last-child { border-bottom: 0; }
.dash-att__label { color: var(--color-text); font-weight: var(--fw-medium); }
a.dash-att:hover .dash-att__label { color: var(--color-brand-text); }
.dash-att__ico {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.dash-att__ico svg { width: 16px; height: 16px; }
.dash-att__ico.is-danger  { background: var(--color-danger-soft);  color: var(--color-danger-text); }
.dash-att__ico.is-warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.dash-att__ico.is-info    { background: var(--color-brand-soft);   color: var(--color-brand-text); }
.dash-att__txt { display: flex; flex-direction: column; min-width: 0; }
.dash-att__sub { color: var(--color-text-subtle); font-size: var(--fs-xs); }
/* Indikátor po splatnosti („16 dní") – výrazná pilulka v tónu řádku. */
.dash-att__meta {
  margin-left: auto; flex: none; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  padding: 4px 11px; border-radius: var(--radius-pill);
  color: var(--color-text-muted); background: var(--color-surface-2);
}
.dash-att__meta.is-danger  { color: var(--color-danger-text);  background: var(--color-danger-soft); }
.dash-att__meta.is-warning { color: var(--color-warning-text); background: var(--color-warning-soft); }
.dash-att__meta.is-info    { color: var(--color-brand-text);   background: var(--color-brand-soft); }

/* „Poslední aktivita" – feed. */
.dash-feed { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--color-border); }
.dash-feed:last-child { border-bottom: 0; }
.dash-feed__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand-light, var(--color-brand)); margin-top: 6px; flex: none; }
.dash-feed__target { font-weight: var(--fw-medium); }
.dash-feed__t { color: var(--color-text-subtle); font-size: var(--fs-xs); margin-top: 2px; }

/* „Rychlé akce". */
.dash-qa { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Freshdesk – vykázaný čas tento měsíc (souhrnný řádek + poznámka). */
.dash-fd-note { margin: var(--sp-3) 0 0; color: var(--color-text-subtle); font-size: var(--fs-xs); }
.dash-fd-table tfoot th, .dash-fd-table tfoot td { border-top: 2px solid var(--color-border); font-weight: var(--fw-semibold); color: var(--color-text); }

/* Hlavička přehledu (uvítání + odkaz na přizpůsobení). */
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }

/* Nastavení přehledu – řádek widgetu (checkbox + počet řádků). */
.dash-cfg-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border); }
.dash-cfg-row:last-child { border-bottom: 0; }
.dash-cfg-row__lbl { font-weight: var(--fw-medium); }
.dash-cfg-row__note { display: block; color: var(--color-text-subtle); font-size: var(--fs-xs); }
.dash-cfg-row__rows { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; font-size: var(--fs-xs); }
.dash-cfg-row__rows .input { width: 70px; height: var(--control-h-sm); }

/* ── Smluvní vzory: rich editor (ContractTemplates) ─────────────────────── */
.rte-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: var(--sp-2);
  padding: var(--sp-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.rte-btn {
  min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid transparent;
  border-radius: var(--radius-md); background: transparent; color: var(--color-text);
  cursor: pointer; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.rte-btn:hover { background: var(--color-surface); border-color: var(--color-border); }
.rte-btn--toggle.is-active { background: var(--color-brand-soft); border-color: var(--color-brand); color: var(--color-brand-text); }
.rte-frame {
  width: 100%; box-sizing: border-box; height: 560px; resize: vertical;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: #fff; display: block;
}
.ct-flags { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin: var(--sp-2) 0 var(--sp-4); }
.ct-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-sm); }

/* ---- Záložky (tabs) – detail ticketu helpdesk konzole -------------------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: var(--sp-2); background: none; border: none; border-bottom: 2px solid transparent; padding: var(--sp-3) var(--sp-4); cursor: pointer; color: var(--color-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.tab:hover { color: var(--color-text); }
.tab.is-active { color: var(--color-brand-text); border-bottom-color: var(--color-brand); }
.tab svg { width: 15px; height: 15px; }
.tabpane { display: none; }
.tabpane.is-active { display: block; }
.card__subtitle { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-3); }

/* ---- Konverzace (thread) ------------------------------------------------- */
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.thread__item { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-4); border-left: 3px solid var(--color-border-strong); }
.thread__item--in   { border-left-color: var(--color-info); }
.thread__item--out  { border-left-color: var(--color-success); }
.thread__item--note { border-left-color: var(--color-warning); background: var(--color-surface-2, rgba(0,0,0,.02)); }
.thread__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; margin-bottom: var(--sp-2); font-size: var(--fs-xs); }
.thread__type { font-weight: var(--fw-semibold); }
.thread__body { font-size: var(--fs-sm); }

/* ---- Konzole (odpověď / poznámka) + editor časového výkazu --------------- */
.console { display: flex; flex-direction: column; gap: var(--sp-5); }
.console__form { display: flex; flex-direction: column; gap: var(--sp-2); }
.console__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.te-form { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; padding: var(--sp-3) 0; }
.te-form .field { display: flex; flex-direction: column; gap: 4px; }
.te-form .field--grow { flex: 1 1 200px; }
.te-form__actions { display: flex; gap: var(--sp-2); align-items: center; }
.te-edit > td { background: var(--color-surface-2, rgba(0,0,0,.02)); }

/* ── Microsoft CSP partnerský odkaz + GDAP (detail zákazníka) ───────────── */
.gdap__status { width:100%; margin:0 0 var(--sp-3); }
.gdap__status th { font-weight:600; font-size:var(--fs-sm); color:var(--color-text-muted); }
.gdap__meta { font-size:var(--fs-xs, .75rem); margin-top:2px; }
.gdap__link { border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:var(--sp-3); margin:var(--sp-3) 0; background:var(--color-surface-2); }
.gdap__link-h { display:flex; align-items:center; gap:.4rem; }
.gdap__num { display:inline-flex; align-items:center; justify-content:center; width:1.4em; height:1.4em; border-radius:50%; background:var(--color-primary); color:#fff; font-size:var(--fs-xs, .75rem); }
.gdap__copy { display:flex; gap:.4rem; align-items:center; }
.gdap__copy .input { flex:1 1 auto; font-family:var(--font-mono, monospace); font-size:var(--fs-sm); }
.gdap__foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); }
.gdap__actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.gdap__msg { margin-top:var(--sp-2); font-size:var(--fs-sm); min-height:1.2em; }
.gdap__msg.is-ok { color:var(--color-success-text); }
.gdap__msg.is-err { color:var(--color-danger-text); }
.btn.is-busy { opacity:.6; pointer-events:none; }

/* Rychlé odkazy na klientské přehledy v boxu Microsoft CSP / GDAP. */
.gdap-links, .card-links { display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--color-border); }
.gdap-link, .card-link { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-2); border-radius:var(--radius-md); color:var(--color-text); text-decoration:none; font-size:var(--fs-sm); transition:background-color .12s ease, color .12s ease; }
.gdap-links--compact { flex-direction:row; flex-wrap:wrap; margin-top:0; padding-top:0; border-top:0; }
.card--links { max-width: 560px; }
.gdap-link:hover, .card-link:hover { background:var(--color-surface-2); color:var(--color-brand-text); }
.gdap-link .gdap-link__t, .card-link .card-link__t { flex:1 1 auto; }
.gdap-link svg, .card-link svg { flex:none; opacity:.7; }
.gdap-link:hover svg, .card-link:hover svg { opacity:1; }

/* Lehký modal (bez frameworku) */
.gdap-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:4vh 1rem; }
.gdap-modal[hidden] { display:none; }
.gdap-modal__backdrop { position:absolute; inset:0; background:rgba(15,23,33,.5); }
.gdap-modal__dialog { position:relative; background:var(--color-surface); border-radius:var(--radius-md, 8px); width:100%; max-width:640px; box-shadow:0 12px 40px rgba(0,0,0,.25); max-height:92vh; overflow:auto; }
.gdap-modal__head { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--color-border); }
.gdap-modal__head h3 { margin:0; display:flex; align-items:center; gap:.5rem; font-size:var(--fs-lg, 1.1rem); }
.gdap-modal__x { background:none; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--color-text-muted); }
.gdap-modal__body { padding:var(--sp-4); }

/* ---- Časový výkaz – zarovnání formuláře (add/edit) ----------------------- */
.te-form .field .input, .te-form .field .select { width: 100%; }
.te-form .te-agent { width: 170px; }
.te-form .te-time  { width: 92px; }
.te-form .te-date  { width: 150px; }
.te-form .field--grow { flex: 1 1 180px; min-width: 140px; }
.te-form__actions { flex: 0 0 auto; }
.te-form__actions .check { white-space: nowrap; }
.iconbtn--danger:hover { color: var(--color-danger-text); }

/* ---- Segmentovaný přepínač (Veřejná / Soukromá) ------------------------- */
.seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.seg__opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: var(--fs-sm); cursor: pointer; }
.seg__opt + .seg__opt { border-left: 1px solid var(--color-border); }
.seg__opt:has(input:checked) { background: var(--color-brand); color: #fff; }

/* ---- Časový výkaz – zarovnání akcí (billable + tlačítka) na řádek polí --- */
.te-form { align-items: flex-start; }
.te-actions { flex: 0 0 auto; }
.te-actions__row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-height: 38px; }

/* ---- Composer konverzace (Odpovědět / Poznámka) – Freshdesk styl --------- */
.composer { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.composer.is-note { border-color: var(--color-warning); box-shadow: inset 4px 0 0 var(--color-warning); }
.composer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--color-border); background: var(--color-surface-2, rgba(0,0,0,.025)); flex-wrap: wrap; }
.composer__tabs { display: inline-flex; gap: var(--sp-1); }
.composer__tab { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent; border-radius: var(--radius-sm, 6px); padding: 6px 12px; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-muted); }
.composer__tab svg { width: 15px; height: 15px; }
.composer__tab:hover { color: var(--color-text); }
.composer__tab.is-active { background: var(--color-surface); border-color: var(--color-border); color: var(--color-brand-text); }
.composer.is-note .composer__tab.is-active { color: var(--color-warning-text); border-color: var(--color-warning); }
.composer__vis { display: inline-flex; align-items: center; }
.composer__area { display: block; width: 100%; border: 0; background: transparent; padding: var(--sp-4); resize: vertical; min-height: 170px; font: inherit; color: var(--color-text); }
.composer__area:focus { outline: none; }
.composer__foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-top: 1px solid var(--color-border); }
.select--sm { padding: 5px 28px 5px 10px; font-size: var(--fs-sm); height: auto; }

/* ---- Composer: oprava skrytí přepínače viditelnosti (jen u poznámky) ----- */
.composer__vis[hidden] { display: none; }

/* ---- Split tlačítko (Odeslat ▾ + nastavení stavu) ----------------------- */
.splitbtn { position: relative; display: inline-flex; }
.splitbtn > .btn:not(.splitbtn__caret) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.splitbtn__caret { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 8px; padding-right: 8px; box-shadow: inset 1px 0 0 rgba(255,255,255,.35); }
.splitbtn__caret svg { width: 14px; height: 14px; }
.splitbtn__menu { position: absolute; bottom: calc(100% + 6px); right: 0; min-width: 250px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.14)); padding: var(--sp-2); z-index: 40; }
.splitbtn__head { font-size: var(--fs-xs); color: var(--color-text-muted); padding: var(--sp-1) var(--sp-2) var(--sp-2); }
.splitbtn__item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left; background: none; border: 0; border-radius: var(--radius-sm, 6px); padding: 8px 10px; cursor: pointer; font-size: var(--fs-sm); color: var(--color-text); }
.splitbtn__item:hover { background: var(--color-surface-2, rgba(0,0,0,.05)); }

/* ---- Detail ticketu: 2 sloupce (ticket vlevo užší, panel Vlastnosti vpravo) ----
   `.cf-form`/`.cf-field` (samostatný formulář volitelných polí) skončily s F1 -
   obsah přešel do panelu Vlastnosti (`.props`/`.prop`, viz výše). */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: var(--sp-5); align-items: start; }
.detail-grid > .card { margin: 0; }
@media (max-width: 980px) { .detail-grid { grid-template-columns: 1fr; } }

/* ---- Popis ticketu: zvýrazněný box + bezpečně vykreslené HTML ------------ */
.ticket-desc { margin-top: var(--sp-5); background: var(--color-surface-2, rgba(0,0,0,.03)); border: 1px solid var(--color-border); border-left: 3px solid var(--color-brand); border-radius: var(--radius-md); padding: var(--sp-4); }
.ticket-desc__h { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: var(--sp-3); }
.ticket-desc__h svg { width: 14px; height: 14px; }

/* Vykreslené HTML (popis + těla konverzací) */
.fd-html { font-size: var(--fs-sm); line-height: 1.55; word-break: break-word; }
.fd-html > :first-child { margin-top: 0; }
.fd-html > :last-child { margin-bottom: 0; }
.fd-html p { margin: 0 0 var(--sp-2); }
.fd-html img { max-width: 100%; height: auto; border-radius: var(--radius-sm, 6px); }
.fd-html a { color: var(--color-brand-text); }
.fd-html ul, .fd-html ol { margin: 0 0 var(--sp-2) var(--sp-5); }
.fd-html blockquote { margin: 0 0 var(--sp-2); padding-left: var(--sp-3); border-left: 2px solid var(--color-border); color: var(--color-text-muted); }
.fd-html pre { background: var(--color-surface-2, rgba(0,0,0,.05)); padding: var(--sp-3); border-radius: var(--radius-sm, 6px); overflow: auto; }
.fd-html table { border-collapse: collapse; max-width: 100%; }
.fd-html td, .fd-html th { border: 1px solid var(--color-border); padding: 4px 8px; }

/* Přílohy (download odkazy) */
.fd-attachments { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--color-border); }
.fd-attachments__h { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: var(--sp-2); }
.fd-attachments__h svg { width: 13px; height: 13px; }
.fd-attachments__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fd-attachments__list a { font-size: var(--fs-sm); }

/* ===== Panel Vlastnosti (freshdesk-tickety-navrh.md §5.1) =====
   Přilepený vpravo vedle ticketu; posílá se DIFF, ale změna musí být VIDĚT
   (rozhodnutí Q1): pruh vlevo, odznak „změněno", „Bylo: …" s odkazem vrátit,
   souhrn nad tlačítkem, počet na tlačítku. Vzor: mockups/freshdesk-ticket-detail.html. */
.detail-grid__side--sticky { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
.props { display: flex; flex-direction: column; }
.prop { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-5); border-left: 3px solid transparent; }
.prop + .prop { border-top: 1px solid var(--color-border); }
.prop > label { font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: var(--fw-medium); display: flex; align-items: center; gap: var(--sp-2); }
.prop.is-dirty { border-left-color: var(--color-accent); background: var(--color-accent-soft); }
.prop__flag { display: none; margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-accent); }
.prop.is-dirty .prop__flag { display: inline-flex; }
.prop__was { display: none; font-size: var(--fs-xs); color: var(--color-text-muted); }
.prop.is-dirty .prop__was { display: block; }
.prop__was s { color: var(--color-text-subtle); }
.prop__undo { border: none; background: none; color: var(--color-brand-text); font: inherit; font-size: var(--fs-xs); cursor: pointer; padding: 0; text-decoration: underline; }
.prop__hint { font-size: var(--fs-xs); color: var(--color-text-subtle); }
.prop__group-h { padding: var(--sp-3) var(--sp-5) var(--sp-1); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); }
.props__foot { border-top: 1px solid var(--color-border); background: var(--color-surface-2); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.chglist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); }
.chglist li { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.chglist b { font-weight: var(--fw-semibold); color: var(--color-text); }
.chglist s { color: var(--color-text-subtle); }
.chglist em { font-style: normal; color: var(--color-accent); font-weight: var(--fw-semibold); }

/* ---- Štítky (F3, návrh §5.3) - žetony + našeptávač ---- */
.tagbox { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center;
          border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
          padding: var(--sp-1) var(--sp-2); min-height: var(--control-h); background: var(--color-surface); }
.tagbox input { border: none; height: auto; padding: var(--sp-1); width: auto; flex: 1; min-width: 90px; background: transparent; }
.tagbox input:focus-visible { box-shadow: none; outline: none; }
.tag { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs);
       padding: 2px var(--sp-2); border-radius: var(--radius-sm); background: var(--color-surface-2);
       color: var(--color-text-muted); border: 1px solid var(--color-border); }
.tag--new { background: var(--color-success-soft, var(--color-surface-2)); color: var(--color-success, var(--color-text-muted)); border-color: transparent; }
.tag__x { border: none; background: none; color: inherit; cursor: pointer; padding: 0; line-height: 1; font-size: var(--fs-sm); }
.tag__x:hover { color: var(--color-danger-text); }
/* Prostý výpis štítků ve sloupci seznamu (bez × - to má jen editovatelný .tagbox). */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* ---- Hromadné akce v seznamu (F5, návrh §5.6) - vzor .rinv-bulkbar ---- */
.fd-bulkbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
              padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
              background: var(--color-brand-soft); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.fd-bulkbar__count { font-size: var(--fs-sm); color: var(--color-text-muted); white-space: nowrap; }
.fd-bulkbar__count strong { color: var(--color-text); }
/* `.input`/`.select` jsou `width:100%` – bez tohohle by se každé pole v flex
   liště natáhlo na celý řádek a lišta by vypadala jako formulář pod sebou
   (stejný princip jako `.filters .input, .filters .select`). */
.fd-bulkbar .select, .fd-bulkbar .input { width: auto; flex: 0 0 auto; }
/* Obecná roztažná mezera pro flex lišty (`<span class="spacer">`) - dřív bez
   pravidla, takže tlačítka "Provést"/"Zrušit výběr" nešla doprava. */
.spacer { flex: 1 1 auto; }

/* ===== Výkazy k fakturaci (invoices_reports) ===== */
.sm{font-size:.82em}
.contents{display:contents}
.btn--success{background:var(--color-success);color:#fff;border-color:var(--color-success)}
.btn--success:hover{filter:brightness(.95)}
.input--xs,.select--xs{height:1.7rem;padding:.1rem .35rem;font-size:.82rem}
.table--compact th,.table--compact td{padding:.3rem .5rem;font-size:.86rem}
.field__lbl{display:block;font-size:.8rem;color:var(--color-text-muted);margin-bottom:.2rem}
.field--grow{flex:1 1 12rem}
.check{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;margin:.4rem 0}
.ir-form{display:flex;flex-direction:column;gap:.7rem;max-width:760px}
.ir-form--inline{flex-flow:row wrap;align-items:flex-end;max-width:none}
.ir-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.ir-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--color-border)}
.ir-actions__right{margin-left:auto}
.ir-row{border:1px solid var(--color-border);border-radius:8px;padding:.7rem .9rem;margin-bottom:.7rem;background:var(--color-surface)}
.ir-row__head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ir-row__title{flex:1 1 auto}
.ir-row__hours{white-space:nowrap;color:var(--color-text)}
.ir-row__meta{margin:.25rem 0 .5rem}
.ir-row__desc{margin:.2rem 0 .5rem;color:var(--color-text-muted)}
.ir-edit{margin:.3rem 0 .6rem}
.ir-edit>summary{cursor:pointer}
.ir-entries{margin-top:.4rem}
.ir-entry__act{white-space:nowrap}
.ir-entries__add td{border-top:2px solid var(--color-border)}
.ir-addrow{margin-top:.6rem}
.ir-addrow>summary{display:inline-flex;list-style:none}
.ir-addrow>summary::-webkit-details-marker{display:none}

/* Veřejná schvalovací stránka (layout proposal) */
.irp{max-width:880px;margin:0 auto;padding:1.5rem}
.irp__head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--color-brand);padding-bottom:.7rem;margin-bottom:1.1rem}
.irp__brand{font-weight:700;font-size:1.15rem;color:var(--color-brand-text)}
.irp__title{margin:.2rem 0 .1rem;font-size:1.4rem}
.irp__sub{color:var(--color-text-muted);margin:0 0 1rem}
.irp__notice{padding:.7rem .9rem;border-radius:7px;margin-bottom:1rem}
.irp__notice--ok{background:var(--color-success-soft);color:var(--color-success-text)}
.irp__notice--info{background:var(--color-brand-soft);color:var(--color-brand-text)}
.irp__notice--err{background:var(--color-danger-soft);color:var(--color-danger-text)}
.irp__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.1rem}
.irp__kpi{border:1px solid var(--color-border);border-radius:8px;padding:.6rem .8rem;display:flex;flex-direction:column;gap:.2rem}
.irp__kpi span{font-size:.8rem;color:var(--color-text-muted)}
.irp__table{margin-bottom:1.2rem}
.irp__resolved{display:flex;align-items:center;gap:.5rem;padding:.9rem;border:1px solid var(--color-border);border-radius:8px;font-weight:600}
.irp__form{border-top:1px solid var(--color-border);padding-top:1.1rem}
.irp__grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.irp__actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}
.irp__foot{margin-top:1.6rem;text-align:center}
@media(max-width:680px){.irp__kpis,.ir-grid2,.irp__grid2{grid-template-columns:1fr 1fr}}

/* Detail výkazu – dvousloupcová hlavička + akční box + rozbalovací odeslání */
.ir-head{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(210px,.85fr);gap:1.3rem;align-items:start}
.ir-head__main{min-width:0}
.ir-head__main .ir-form{max-width:none}
.ir-actbox{display:flex;flex-direction:column;gap:.45rem}
.ir-actbox__status{display:flex;align-items:center;gap:.45rem;padding-bottom:.5rem;margin-bottom:.2rem;border-bottom:1px solid var(--color-border)}
.ir-actbox form{margin:0}
.ir-actbox__btn{width:100%;justify-content:center}
.ir-actbox__note{margin:.3rem 0 0}
.ir-send{margin:0 1rem 1rem;border:1px solid var(--color-border);border-radius:8px}
.ir-send__summary{cursor:pointer;display:flex;align-items:center;gap:.45rem;padding:.7rem .9rem;font-weight:600;color:var(--color-brand-text)}
.ir-send__summary::-webkit-details-marker{display:none}
.ir-send[open] .ir-send__summary{border-bottom:1px solid var(--color-border)}
.ir-send__body{padding:.9rem}
.ir-rowactions{display:inline-flex;gap:.3rem;align-items:center;justify-content:flex-end}
.ir-rowactions form{margin:0}
.ir-entry__act{white-space:nowrap;display:flex;gap:.25rem;justify-content:flex-end}
@media(max-width:760px){.ir-head{grid-template-columns:1fr}}

/* Detail výkazu v2 – dvě samostatné boxy nahoře + read-only řádky s edit ikonami */
.ir-top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(230px,.8fr);gap:1rem;align-items:start;margin-bottom:1rem}
.ir-top__main,.ir-top__side{margin:0}
.ir-top__side .ir-actbox{display:flex;flex-direction:column;gap:.45rem}
.ir-top__side .ir-actbox form{margin:0}
.badge--soft{background:var(--color-brand-soft);color:var(--color-brand-text);border:1px solid var(--color-border)}
.ir-row__tools{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start;margin-top:.6rem;padding-top:.55rem;border-top:1px dashed var(--color-border)}
.ir-row__tools form{margin:0}
.ir-mini{border:1px solid var(--color-border);border-radius:6px}
.ir-mini>summary{cursor:pointer;list-style:none;display:inline-flex}
.ir-mini>summary::-webkit-details-marker{display:none}
.ir-mini__body{padding:.7rem;border-top:1px solid var(--color-border);min-width:min(540px,90vw)}
.ir-mini__body .field{margin-bottom:.5rem}
/* .ir-send je nyní samostatná karta (details.card) – zruš dřívější inset */
details.ir-send{margin:0 0 1rem;padding:0}
details.ir-send .ir-send__summary{padding:.85rem 1rem}
details.ir-send .ir-send__body{padding:1rem}
@media(max-width:760px){.ir-top{grid-template-columns:1fr}}

/* Detail výkazu v3 – řádek: edit/remove ikony vpravo nahoře, součet pod tabulkou, inline edit */
.ir-row__rowact{margin-left:auto;display:inline-flex;gap:.3rem;align-items:center}
.ir-row__rowact form,.ir-entry__act form{margin:0;display:inline-flex}
.ir-row__editform{margin:.5rem 0 .3rem;padding:.7rem;border:1px solid var(--color-border);border-radius:6px}
.ir-row__foot{display:flex;gap:.45rem;align-items:baseline;justify-content:flex-end;margin-top:.35rem;padding-top:.45rem;border-top:1px dashed var(--color-border)}
.ir-x{border:0;background:transparent;font-size:1.25rem;line-height:1;cursor:pointer;color:var(--color-text-muted);padding:0 .3rem}
.ir-x:hover{color:var(--color-text)}
.ir-send .card__head{display:flex;justify-content:space-between;align-items:center}
tr[data-ir-form][hidden]{display:none}

/* Decentní mazací ikony – tlumené, červené až při hoveru */
.btn--del{color:var(--color-text-subtle)}
.btn--del:hover,.btn--del:focus-visible{color:var(--color-danger-text);background:var(--color-danger-soft);border-color:var(--color-danger-soft)}

/* Řádek – editační formulář v gridu (Uložit/Zavřít v jedné lince s poli) */
.ir-editrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 10rem 6rem auto auto;gap:.6rem;align-items:end}
.ir-editrow .field{margin:0}
@media(max-width:760px){.ir-editrow{grid-template-columns:1fr 1fr}}

/* Modal „Odeslat ke schválení" (native <dialog>) */
.ir-modal{border:0;border-radius:10px;padding:0;max-width:620px;width:calc(100% - 2rem);box-shadow:0 18px 50px rgba(0,0,0,.28);color:var(--color-text);background:var(--color-surface)}
.ir-modal::backdrop{background:rgba(15,23,32,.5)}
.ir-modal__head{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.1rem;border-bottom:1px solid var(--color-border)}
.ir-modal__head h2{margin:0;font-size:1.05rem;display:flex;gap:.45rem;align-items:center}
.ir-modal__body{padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;max-height:68vh;overflow:auto}
.ir-modal__foot{display:flex;justify-content:flex-end;gap:.5rem;padding:.8rem 1.1rem;border-top:1px solid var(--color-border)}

/* Modal výkazu – vyšší pole zprávy + placeholder tokeny */
.ir-mail-body{min-height:11rem;resize:vertical}
.ir-modal__body code{background:var(--color-brand-soft);color:var(--color-brand-text);padding:.05rem .35rem;border-radius:4px;font-size:.85em}

/* Akční box – ruční nastavení stavu */
.ir-statusset{margin-top:.5rem;padding-top:.6rem;border-top:1px solid var(--color-border)}
.ir-statusset__row{display:flex;gap:.4rem;align-items:center;margin-top:.25rem}
.ir-statusset__row .select{flex:1}

/* Kopírovatelné odkazy v akčním boxu */
.ir-links{margin-top:.5rem;padding-top:.6rem;border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:.15rem}
.ir-copy{display:flex;gap:.3rem;align-items:center;margin-bottom:.3rem}
.ir-copy .input{flex:1;font-size:.78rem}
[data-ir-copy].is-copied{color:var(--color-success-text)}
.ir-idoklad-done{display:inline-flex;align-items:center;gap:.35rem;color:var(--color-success-text)}

/* iDoklad modal – náhled ceníku smlouvy */
.ir-pricing{display:flex;flex-direction:column;gap:.45rem;padding:.75rem .95rem;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}
.ir-pricing>div{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;font-size:.88rem}
.ir-pricing span{color:var(--color-text-muted)}
.ir-pricing strong{white-space:nowrap}
.ir-idoklad-done{display:inline-flex;align-items:center;gap:.35rem;color:var(--color-success-text)}
/* iDoklad fialová tlačítka */
.btn--idoklad{background:#7C3AED;color:#fff;border-color:#7C3AED}
.btn--idoklad:hover,.btn--idoklad:focus-visible{background:#6D28D9;border-color:#6D28D9;color:#fff}
.btn--uol{background:#EA580C;color:#fff;border-color:#EA580C}
.btn--uol:hover,.btn--uol:focus-visible{background:#C2410C;border-color:#C2410C;color:#fff}
.ir-idoklad-done{color:#7C3AED}
/* iDoklad modal o něco širší – ať se ceník nezalamuje */
#ir-idoklad-dialog.ir-modal{max-width:680px}

/* ===== Výkaz – redesign hlavičky (header band + stepper + akce) ===== */
.kpis--5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1099px){.kpis--5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.kpis--5{grid-template-columns:repeat(2,1fr)}}
.kpis--5 .kpi__val{white-space:nowrap}

/* drobečková navigace */
.irh-crumbs{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.85rem;flex-wrap:wrap}
.irh-crumbs__path{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--color-text-muted)}
.irh-crumbs__path a{color:var(--color-text-muted);text-decoration:none}
.irh-crumbs__path a:hover{color:var(--color-brand-text)}
.irh-crumbs__sep{color:var(--color-border-strong)}
.irh-crumbs__cur{font-weight:var(--fw-semibold);color:var(--color-text)}
.irh-crumbs__back{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-brand-text);text-decoration:none}
.irh-crumbs__back:hover{text-decoration:underline}

/* hlavní pruh */
.irh-band{border-radius:var(--radius-lg);padding:1.4rem 1.5rem;margin-bottom:1.1rem}
.irh-band__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.irh-band__id{min-width:260px}
.irh-band__pills{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}
.irh-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .7rem;border-radius:999px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);background:var(--color-surface-2);color:var(--color-text-muted)}
.irh-pill--ok{background:var(--color-success-soft);color:var(--color-success-text)}
.irh-pill--warn{background:var(--color-warning-soft);color:var(--color-warning-text)}
.irh-pill--danger{background:var(--color-danger-soft);color:var(--color-danger-text)}
.irh-band__meta{font-size:var(--fs-sm);color:var(--color-text-subtle)}
.irh-band__h1{margin:0;font-size:1.7rem;font-weight:var(--fw-bold);letter-spacing:-.01em;color:var(--color-text);line-height:1.15}
.irh-band__sub{margin-top:.3rem;font-size:var(--fs-sm);color:var(--color-text-muted)}

/* primární akce v pruhu */
.irh-band__cta{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem}
.irh-band__cta form{margin:0}
.irh-cta{padding:.7rem 1.25rem;font-size:var(--fs-base);font-weight:var(--fw-semibold);border-radius:var(--radius-md)}
.irh-cta--ok{background:var(--color-success);color:#fff;border-color:var(--color-success)}
.irh-cta--ok:hover,.irh-cta--ok:focus-visible{background:var(--color-success);border-color:var(--color-success);color:#fff;filter:brightness(.88)}
.irh-cta__hint{font-size:var(--fs-xs);color:var(--color-text-subtle);text-align:right}
.irh-cta__sent{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--color-success-text)}

/* workflow stepper */
.irh-stepper{display:flex;align-items:flex-start;margin-top:1.35rem;padding-top:1.2rem;border-top:1px solid var(--color-border)}
.irh-stepper__line{flex:1;height:2px;background:var(--color-border);margin-top:.85rem}
.irh-stepper__line.is-done{background:var(--color-success)}
.irh-step{display:flex;flex-direction:column;align-items:center;width:78px;flex:none}
.irh-step__dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:var(--fw-bold);border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text-subtle)}
.irh-step__dot.is-done{background:var(--color-success);border-color:var(--color-success);color:#fff}
.irh-step__dot.is-active{background:var(--color-brand);border-color:var(--color-brand);color:#fff}
.irh-step__dot.is-rejected{background:var(--color-danger);border-color:var(--color-danger);color:#fff}
.irh-step__lbl{margin-top:.45rem;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--color-text-subtle);text-align:center;line-height:1.2}
.irh-step__lbl.is-done{color:var(--color-success-text);font-weight:var(--fw-semibold)}
.irh-step__lbl.is-active{color:var(--color-brand-text);font-weight:var(--fw-semibold)}
.irh-step__lbl.is-rejected{color:var(--color-danger-text);font-weight:var(--fw-semibold)}

/* hlavička – zámek */
.irh-lock{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-xs);color:var(--color-text-subtle)}

/* akce – seskupené sekce */
.irh-akce{display:flex;flex-direction:column;gap:1.05rem}
.irh-akce form{margin:0}
.irh-akce__grp{display:flex;flex-direction:column;gap:.55rem}
.irh-akce__grp--top{border-top:1px solid var(--color-border);padding-top:1rem}
.irh-akce__lbl{font-size:10px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-subtle)}
.irh-akce__sublbl{margin-top:.2rem}
.irh-akce__note{margin:0;line-height:1.5}
.irh-akce .ir-copy{margin:0}
.ir-copy__btn{flex:none;width:34px;height:34px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);color:var(--color-text-muted)}
.irh-del{color:var(--color-danger-text);border-color:var(--color-danger-soft);background:var(--color-surface);justify-content:center;width:100%}
.irh-del:hover,.irh-del:focus-visible{background:var(--color-danger-soft);border-color:var(--color-danger);color:var(--color-danger-text)}

/* změnit stav ručně – rozbalovací */
.irh-manual{margin-top:.1rem}
.irh-manual__sum{list-style:none;cursor:pointer;color:var(--color-brand-text);font-size:var(--fs-sm);font-weight:var(--fw-semibold);display:inline-flex;align-items:center;gap:.3rem}
.irh-manual__sum::-webkit-details-marker{display:none}
.irh-manual__sum::after{content:'▾';font-size:.7em}
.irh-manual[open] .irh-manual__sum::after{content:'▴'}
.irh-manual__row{display:flex;gap:.4rem;align-items:stretch;margin-top:.6rem}
.irh-manual__row .select{flex:1;min-width:0}
.irh-manual__row .select,.irh-manual__row .btn{height:var(--control-h-sm);min-height:var(--control-h-sm)}

/* klikací odkaz na ticket (#id → veřejná URL) */
.irh-ticket{display:inline-flex;align-items:center;gap:.25rem;text-decoration:none;cursor:pointer}
.irh-ticket:hover{background:var(--color-brand);color:var(--color-brand-contrast)}
.irh-ticket svg{opacity:.7}

/* ============================================================================
   Cenový simulátor (Fakturace → /invoicing/price-simulator) – .psim-*
   ========================================================================== */
/* Vstupní panel – kaskáda faktura → prodejce → zákazník → produkt */
.psim-form { display: flex; flex-direction: column; gap: var(--sp-4);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px); padding: var(--sp-4) var(--sp-5); }
.psim-row { display: grid; gap: var(--sp-4); }
.psim-row--invoice { grid-template-columns: minmax(0, 560px); }
.psim-cascade { grid-template-columns: repeat(3, 1fr); }
.psim-form .field { margin-bottom: 0; position: relative; }
@media (max-width: 860px) { .psim-cascade { grid-template-columns: 1fr; } .psim-row--invoice { grid-template-columns: 1fr; } }
.psim-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding-top: var(--sp-2); border-top: 1px solid var(--color-border); }
.psim-hint { font-size: var(--fs-sm); }
/* Export výsledků (XLSX / JSON) – zobrazí se až po výpočtu */
.psim-export { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.psim-export[hidden] { display: none; }
.psim-export__lbl { font-size: var(--fs-sm); }
/* Číslovaný odznak kroku */
.psim-step { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px; background: var(--color-brand);
  color: var(--color-brand-contrast); font-size: var(--fs-xs, .72rem);
  font-weight: var(--fw-bold, 700); margin-right: 4px; vertical-align: -1px; }
/* Upozornění (např. ořezáno na max. počet položek) */
.psim-notice { background: var(--color-warning-soft); color: var(--color-warning-text);
  border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4);
  font-size: var(--fs-sm); }

/* Kompatibilita: nomargin_settings.php používá .psim-fields */
.psim-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.psim-fields .field { margin-bottom: 0; position: relative; }
@media (max-width: 860px) { .psim-fields { grid-template-columns: 1fr; } }

/* Výsledky – řetězec uzlů */
.psim-results { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }
.psim-loading { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-5); color: var(--color-text-muted); }
.psim-item .card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }

.psim-flow { display: flex; align-items: stretch; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-2) 0; }
.psim-arrow { display: flex; align-items: center; color: var(--color-text-muted); font-size: 1.25rem; flex: 0 0 auto; }

.psim-node { flex: 1 1 0; min-width: 180px; background: var(--color-surface-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg, 12px);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.psim-node--pax8 { background: var(--color-info-soft); }
.psim-node--end_customer { border-color: var(--color-brand); }
.psim-node.is-incomplete { border-color: var(--color-danger); background: var(--color-danger-soft); }
.psim-node__lvl { font-size: var(--fs-xs, .75rem); text-transform: uppercase; letter-spacing: .04em;
  font-weight: var(--fw-bold, 700); color: var(--color-brand-text); }
.psim-node__price, .psim-node__margin { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.psim-node__k { font-size: var(--fs-sm); color: var(--color-text-muted); }
.psim-node__v { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.psim-node__mp { color: var(--color-text-muted); font-weight: 400; font-size: var(--fs-sm); }
.psim-cur { color: var(--color-text-muted); font-weight: 400; font-size: .9em; }
.psim-na { color: var(--color-text-muted); }
.psim-node__warn { font-size: var(--fs-sm); color: var(--color-danger-text); }

.psim-why { display: inline-flex; align-items: center; gap: var(--sp-2); background: none; border: 0;
  cursor: pointer; padding: 0; margin-top: auto; text-align: left; }
.psim-why__q { font-size: var(--fs-xs, .75rem); color: var(--color-text-muted); text-decoration: underline; }

.psim-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs, .75rem);
  font-weight: var(--fw-medium); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
.psim-chip--contract { background: var(--color-info-soft); color: var(--color-info-text); border-color: transparent; }
.psim-chip--pricelist, .psim-chip--pricelist_percent { background: var(--color-success-soft); color: var(--color-success-text); border-color: transparent; }
.psim-chip--gpl { background: var(--color-surface-2); color: var(--color-text-muted); }
.psim-chip--split { background: var(--color-violet-soft); color: var(--color-violet-text); border-color: transparent; }
.psim-chip--no_margin { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: transparent; }
.psim-chip--cost_floor { background: var(--color-danger-soft); color: var(--color-danger-text); border-color: transparent; }

.psim-split { background: var(--color-violet-soft); color: var(--color-violet-text); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); margin-bottom: var(--sp-2); }

/* Drill-down popover „proč tato cena" */
.psim-pop { position: absolute; z-index: 60; width: 320px; max-width: calc(100vw - 16px);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,.18)); }
.psim-pop__head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3); border-bottom: 1px solid var(--color-border); }
.psim-pop__x { background: none; border: 0; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); }
.psim-pop__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.psim-pop__kind { margin-bottom: var(--sp-2); }
.psim-pop__ref { font-size: var(--fs-sm); color: var(--color-text-muted); }
.psim-pop__sec { font-size: var(--fs-xs, .75rem); text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-muted); margin-top: var(--sp-2); margin-bottom: 2px; }
.psim-pop__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-sm); padding: 1px 0; }
.psim-pop__row > span:first-child { color: var(--color-text-muted); }
.psim-pop__row > span:last-child { font-variant-numeric: tabular-nums; text-align: right; }

/* Simulátor – součtová cena, term chipy, odkazy v drill-downu */
.psim-node__tot { display: block; font-size: var(--fs-xs, .72rem); color: var(--color-text-muted);
  font-weight: 400; margin-top: 1px; }
.psim-term { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: var(--fs-xs, .72rem);
  font-weight: var(--fw-medium); background: var(--color-surface-2); color: var(--color-text-muted);
  border: 1px solid var(--color-border); vertical-align: middle; }
.psim-term--commit { background: var(--color-info-soft); color: var(--color-info-text); border-color: transparent; }
.psim-pop__links { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-3);
  padding-top: var(--sp-2); border-top: 1px solid var(--color-border); }
.psim-pop__link { font-size: var(--fs-sm); color: var(--color-brand-text); text-decoration: none; }
.psim-pop__link:hover { text-decoration: underline; }

/* Simulátor – uzel s varováním (např. prodej srovnán s nákupem) + součet popisek */
.psim-node.is-warn { border-color: var(--color-warning); background: var(--color-warning-soft); }
.psim-node__totq { opacity: .7; }

/* Simulátor – popis položky, souhrn, progress bar */
.psim-item__h { min-width: 0; }
.psim-desc { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.psim-summary { margin-top: var(--sp-4); }
.psim-sum-card { border-left: 3px solid var(--color-brand); }
.psim-loading { flex-wrap: wrap; }
.psim-progress { flex-basis: 100%; position: relative; height: 4px; max-width: 260px; margin-top: var(--sp-2);
  background: var(--color-surface-2); border-radius: 999px; overflow: hidden; }
.psim-progress__bar { position: absolute; top: 0; height: 100%; width: 40%; background: var(--color-brand);
  border-radius: 999px; animation: psim-prog 1.1s ease-in-out infinite; }
@keyframes psim-prog { 0% { left: -40%; } 100% { left: 100%; } }

/* ── UniFi dokumentace (nástroj toolboxu) ─────────────────────────────────── */
.unifi-pick { display: flex; flex-direction: column; gap: var(--sp-1); max-width: 420px; }
.unifi-overview { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.unifi-stats { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.unifi-stat { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.unifi-stat__n { font-size: var(--fs-xl); font-weight: 700; line-height: 1; color: var(--color-text); }
.unifi-stat__l { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.unifi-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.unifi-export { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.unifi-site { padding: var(--sp-3) 0; border-top: 1px solid var(--color-border); }
.unifi-site:first-child { border-top: 0; }
.unifi-site__h { font-size: var(--fs-sm); font-weight: 600; margin: 0 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-1); }
.unifi-subs { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.unifi-det > summary { cursor: pointer; font-size: var(--fs-sm); padding: var(--sp-2) 0; user-select: none; }
.unifi-det[open] > summary { font-weight: 600; }
.unifi-raw { font-size: var(--fs-xs); line-height: 1.4; white-space: pre-wrap; word-break: break-all;
  max-height: 420px; overflow: auto; background: var(--color-surface-2); padding: var(--sp-3); border-radius: var(--radius-sm); margin: 0; }
.unifi-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); }
.unifi-overlay__box { background: var(--color-surface); color: var(--color-text); padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); text-align: center; max-width: 360px; }
.unifi-overlay__box p { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.unifi-spinner { width: 36px; height: 36px; margin: 0 auto; border: 3px solid var(--color-border);
  border-top-color: var(--color-brand); border-radius: 50%; animation: unifi-spin 0.8s linear infinite; }
@keyframes unifi-spin { to { transform: rotate(360deg); } }

/* ── Raynet (CRM – nástroj v sekci Fakturace) ─────────────────────────────── */
.rn-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
/* Detail – přehled polí (definiční mřížka) + surová data */
.rn-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3) var(--sp-5); margin: 0; }
.rn-dl__row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rn-dl__row dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); }
.rn-dl__row dd { margin: 0; font-size: var(--fs-sm); color: var(--color-text); word-break: break-word; }
.rn-rawjson { font-size: var(--fs-xs); line-height: 1.45; white-space: pre-wrap; word-break: break-all;
  max-height: 460px; overflow: auto; background: var(--color-surface-2); padding: var(--sp-3); border-radius: var(--radius-sm); margin: 0; }

/* Simulátor – chip „starší nastavení" (legacy cf_csp_* místo smlouvy) */
.psim-chip--legacy { background: var(--color-surface-2); color: var(--color-text-muted); border-color: var(--color-border); }

/* Simulátor – seznam provizí (slevových položek) v souhrnu */
.psim-prov__h { font-size: var(--fs-base, 1rem); font-weight: var(--fw-bold, 700); margin: var(--sp-4) 0 var(--sp-2); }
.psim-sum-card .psim-prov { margin-top: 0; }
.psim-sum-card .psim-prov tfoot td { font-weight: var(--fw-bold, 700); border-top: 2px solid var(--color-border); }

/* API integrace – návod (SharePoint Online a spol.) */
.api-guide { border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3); background: var(--color-surface); }
.api-guide > summary { cursor: pointer; font-weight: var(--fw-semibold, 600); list-style: revert; }
.api-guide[open] > summary { margin-bottom: var(--sp-3); }
.api-guide__steps { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.api-guide__steps li { line-height: 1.5; }
.api-guide__code { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); padding: var(--sp-3); margin: var(--sp-2) 0 0; overflow-x: auto; font-family: var(--font-mono, monospace); font-size: var(--fs-xs, .8125rem); line-height: 1.5; white-space: pre; }

/* Maržový report CSP (/invoicing/csp-margin) */
.num-pos { color: var(--color-success-text); }
.num-neg { color: var(--color-danger-text); font-weight: var(--fw-bold, 700); }
.csp-margin tfoot th { background: var(--color-surface-2); text-align: right; }
.csp-margin__sub th, .csp-margin__comm th { font-weight: var(--fw-medium); }
.csp-margin__grand th { border-top: 2px solid var(--color-border); font-size: var(--fs-base, 1rem); font-weight: var(--fw-bold, 700); }
.csp-margin__to { font-size: var(--fs-sm); margin-top: 1px; }
.csp-margin tfoot th { white-space: normal; }
.csp-margin tfoot th.nowrap { white-space: nowrap; min-width: 6.5rem; }

/* API integrace – test připojení (SharePoint) */
.sp-test { margin-top: var(--sp-3); }
.sp-test__banner { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm, 6px); font-weight: var(--fw-semibold, 600); border: 1px solid var(--color-border); }
.sp-test__banner.is-ok { background: var(--color-success-soft); color: var(--color-success-text); border-color: var(--color-success); }
.sp-test__banner.is-fail { background: var(--color-danger-soft); color: var(--color-danger-text); border-color: var(--color-danger); }
.sp-test__banner.is-running { background: var(--color-surface-2); color: var(--color-text); }
.sp-test__steps { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.sp-test__steps li { display: grid; grid-template-columns: 1.25rem auto; align-items: start; gap: var(--sp-1) var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border); }
.sp-test__steps li:last-child { border-bottom: 0; }
.sp-test__mark { font-weight: var(--fw-bold, 700); }
.sp-test__steps li.is-ok .sp-test__mark { color: var(--color-success-text); }
.sp-test__steps li.is-fail .sp-test__mark { color: var(--color-danger-text); }
.sp-test__label { font-weight: var(--fw-semibold, 600); }
.sp-test__detail { grid-column: 2; font-size: var(--fs-xs, .8125rem); color: var(--color-text-muted); font-family: var(--font-mono, monospace); word-break: break-word; }
/* Chybějící údaje kredence, bez nichž návod/skript nelze předvyplnit. */
.sp-test__guide { margin-top: var(--sp-3); }
.sp-test__guidetitle { font-weight: var(--fw-semibold, 600); margin: 0 0 var(--sp-1); }
.sp-test__missing { margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-warning); border-radius: var(--radius-sm, 6px); background: var(--color-warning-soft); font-size: var(--fs-sm, .875rem); }
.sp-test__missing p { margin: 0 0 var(--sp-1); font-weight: var(--fw-semibold, 600); }
.sp-test__missing ul { margin: 0 0 var(--sp-1); padding-left: var(--sp-4); }

/* CSP margin report – hlavička, legenda, zarovnání číselných hlaviček */
.csp-margin thead th { white-space: nowrap; }
.csp-count { font-size: var(--fs-sm); color: var(--color-text-muted); }
.csp-count strong { color: var(--color-text); }
.csp-legend { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-sm); }
.csp-legend__icon { display: inline-flex; align-items: center; color: var(--color-brand-text); }
.csp-legend__text { color: var(--color-text-muted); flex: 1 1 auto; }

/* ── Nápověda (pp-help): rozcestník, modul, „?" bublina ─────────────────── */
.help-search{display:flex;gap:var(--sp-2);align-items:center;margin:var(--sp-4) 0 var(--sp-5);max-width:640px}
.help-search__i{display:inline-flex;color:var(--color-text-muted)}
.help-search__input{flex:1}

.help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-3)}
.help-card{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s,transform .12s}
.help-card:hover{border-color:var(--color-brand-light);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.help-card__ico{display:inline-flex;flex:none;width:38px;height:38px;align-items:center;justify-content:center;
  border-radius:var(--radius-md);background:var(--color-brand-soft);color:var(--color-brand-text)}
.help-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.help-card__title{font-weight:600;color:var(--color-text)}
.help-card__sum{font-size:var(--fs-sm);color:var(--color-text-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.help-results{list-style:none;margin:0;padding:0}
.help-results>li{border-bottom:1px solid var(--color-border)}
.help-results>li:last-child{border-bottom:0}
.help-results__link{display:grid;grid-template-columns:1fr auto;gap:2px var(--sp-3);align-items:center;
  padding:var(--sp-3) var(--sp-4);text-decoration:none;color:inherit}
.help-results__link:hover{background:var(--color-surface-2)}
.help-results__title{font-weight:600;color:var(--color-text)}
.help-results__sum{grid-column:1;font-size:var(--fs-sm);color:var(--color-text-muted)}
.help-results__mod{grid-column:2;grid-row:1/3;align-self:center;font-size:var(--fs-xs);color:var(--color-text-subtle);
  border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:1px var(--sp-2)}

.help-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.help-head__upd{font-size:var(--fs-xs);color:var(--color-text-muted);display:inline-flex;align-items:center;gap:4px}
.help-intro{color:var(--color-text-muted);font-size:var(--fs-md);max-width:72ch;margin-bottom:var(--sp-5)}
.help-intro p{margin:.4em 0}

.help-layout{display:grid;grid-template-columns:220px 1fr;gap:var(--sp-6);align-items:start}
.help-toc{position:sticky;top:var(--sp-4);font-size:var(--fs-sm)}
.help-toc__h{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;
  color:var(--color-text-subtle);margin-bottom:var(--sp-2)}
.help-toc ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--color-border)}
.help-toc li{margin:0}
.help-toc a{display:block;padding:4px var(--sp-3);color:var(--color-text-muted);text-decoration:none;
  border-left:2px solid transparent;margin-left:-2px}
.help-toc a:hover{color:var(--color-text)}
.help-toc a.is-active{color:var(--color-brand-text);border-left-color:var(--color-brand);font-weight:600}

.help-body{min-width:0;max-width:74ch}
.help-section{padding:var(--sp-5) 0;border-bottom:1px solid var(--color-border)}
.help-section:first-child{padding-top:0}
.help-section:last-child{border-bottom:0}
.help-section__title{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  font-size:var(--fs-lg);margin:0 0 var(--sp-2);scroll-margin-top:80px}
.help-section__txt{color:var(--color-text);line-height:1.6}
.help-section__txt p{margin:.5em 0}
.help-section__txt ul,.help-section__txt ol{margin:.5em 0;padding-left:1.4em}
.help-section__txt li{margin:.25em 0}
.help-section__txt code{background:var(--color-surface-2);border-radius:var(--radius-sm);padding:1px 5px;font-size:.9em}

.help-req{font-size:var(--fs-xs);font-weight:600;border-radius:var(--radius-pill);padding:1px var(--sp-2);line-height:1.5}
.help-req--yes{background:var(--color-danger-soft);color:var(--color-danger-text)}
.help-req--no{background:var(--color-surface-2);color:var(--color-text-muted)}

.help-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin:var(--sp-3) 0 0;
  padding:var(--sp-3);background:var(--color-surface-2);border-radius:var(--radius-md)}
.help-meta>div{display:flex;flex-direction:column;gap:1px;min-width:160px}
.help-meta dt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-subtle);margin:0}
.help-meta dd{margin:0;font-size:var(--fs-sm);color:var(--color-text)}

/* „?" ikona u pole (Phase B) + bublina */
.help{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:4px;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:transparent;
  color:var(--color-text-muted);font-size:11px;font-weight:700;cursor:help;line-height:1}
.help:hover{color:var(--color-brand-text);border-color:var(--color-brand)}
.help-popover{position:absolute;z-index:60;max-width:300px;padding:var(--sp-3);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  font-size:var(--fs-sm);color:var(--color-text)}
.help-popover__t{display:block;margin-bottom:4px}
.help-popover p{margin:.25em 0}
.help-popover__m span{color:var(--color-text-subtle)}
.help-popover__more{display:inline-block;margin-top:4px;color:var(--color-brand-light);text-decoration:none}

@media (max-width:860px){
  .help-layout{grid-template-columns:1fr}
  .help-toc{position:static;border:0;margin-bottom:var(--sp-4)}
}

/* ── PAX8 → iDoklad: vytvoření zakázek (seznam faktur + náhled) ───────────── */
.idk-debug { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm, .85rem);
  color: var(--color-text-muted); cursor: pointer; user-select: none; padding-left: 6px; }
.idk-debug input { accent-color: var(--color-brand); }
.btn.is-done { color: var(--color-success-text); }

.idk-mode { margin-bottom: var(--sp-3, 12px); }
.idk-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.idk-summary__info { color: var(--color-text); }

.idk-group { margin-top: var(--sp-3, 12px); }
.idk-group.is-sent { border-left: 3px solid var(--color-success); }
.idk-group.is-failed { border-left: 3px solid var(--color-danger); }
.idk-group__head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: var(--sp-2, 8px); }
.idk-group__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.idk-group__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.idk-group__meta .small, .muted.small { font-size: var(--fs-sm, .82rem); }
.idk-group__foot { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: var(--sp-2, 8px); padding-top: var(--sp-2, 8px);
  border-top: 1px solid var(--color-border); }

.idk-status { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: var(--radius-md); margin-bottom: var(--sp-2, 8px); font-size: var(--fs-sm, .85rem); }
.idk-status--ok { background: var(--color-success-soft); }
.idk-status--err { background: var(--color-danger-soft); }

.idk-lines__summary td { background: var(--color-info-soft); }
.idk-lines tfoot th { border-top: 2px solid var(--color-border-strong); }
/* Součet + měna nikdy nelámat na nový řádek */
.idk-lines tfoot th.num { white-space: nowrap; }

/* „Odeslat znovu" vedle stavu „Vytvořeno" u již odeslané skupiny */
.idk-group__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.idk-collapsed { margin-top: var(--sp-2, 8px); }
.idk-collapsed > summary { cursor: pointer; color: var(--color-brand-text); font-size: var(--fs-sm, .85rem);
  padding: 6px 0; }
.idk-collapsed__table th, .idk-collapsed__table td { font-size: var(--fs-sm, .82rem); }

.idk-warn { display: flex; align-items: center; gap: 6px; margin-top: var(--sp-2, 8px);
  color: var(--color-warning-text); font-size: var(--fs-sm, .82rem); }

/* PAX8→iDoklad náhled: SLEVA (provize ze splitu) + řádek „cena s DPH" */
.idk-lines__discount td { color: var(--color-danger-text); font-style: italic; }
.idk-lines__vat th { border-top: 1px dashed var(--color-border); font-weight: 500; color: var(--color-text-muted); }

/* PAX8→iDoklad náhled: poznámka + číslo smlouvy (co půjde do dokladu) */
.idk-note { margin-top: var(--sp-2, 8px); padding: 8px 10px; background: var(--color-surface-2);
  border-radius: var(--radius-md); font-size: var(--fs-sm, .82rem); line-height: 1.5; }
.idk-note > div + div { margin-top: 4px; }

/* ---- Barevný přepínač „zpracováno" v seznamu PAX8 faktur ---------------- */
.pp-switch-form { display: inline-flex; margin: 0; }
.pp-switch { display: inline-flex; align-items: center; padding: 0; border: 0; background: none;
  cursor: pointer; line-height: 0; }
.pp-switch__track { position: relative; display: inline-block; width: 38px; height: 20px;
  border-radius: 999px; background: var(--color-border-strong);
  transition: background .15s ease; }
.pp-switch__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .15s ease; }
.pp-switch.is-on .pp-switch__track { background: var(--color-success); }
.pp-switch.is-on .pp-switch__thumb { transform: translateX(18px); }
.pp-switch:focus-visible { outline: none; }
.pp-switch:focus-visible .pp-switch__track { box-shadow: 0 0 0 3px var(--color-brand-soft, rgba(60,120,240,.35)); }

/* ---- Zvoneček oznámení (Fáze 1) ------------------------------------------ */
.notifbell { position: relative; }
.notifbell__btn { position: relative; }
.notifbell__badge {
  position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--radius-pill); background: var(--color-danger);
  color: #fff; font-size: 10px; line-height: 16px; font-weight: var(--fw-semibold);
  text-align: center; pointer-events: none;
}
.notifbell__badge[hidden] { display: none; }
.notifbell__panel { width: 360px; max-width: 92vw; padding: 0; }
.notifbell__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--color-border);
}
.notifbell__readall {
  border: none; background: none; color: var(--color-brand-text); font: inherit;
  font-size: var(--fs-xs); cursor: pointer; padding: 0;
}
.notifbell__list { max-height: 60vh; overflow-y: auto; }
.notifbell__foot { border-top: 1px solid var(--color-border); padding: var(--sp-1); }
.notifbell__empty { color: var(--color-text-muted); font-size: var(--fs-sm); padding: var(--sp-4); text-align: center; }

/* Položka oznámení (sdílí zvoneček i plný výpis) */
.notiflist { display: flex; flex-direction: column; }
.notifitem {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--color-border);
}
.notifitem:last-child { border-bottom: 0; }
.notifitem.is-unread { background: var(--color-brand-soft); }
.notifitem__dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--color-text-muted); }
.notifitem--info .notifitem__dot    { background: var(--color-info); }
.notifitem--success .notifitem__dot { background: var(--color-success); }
.notifitem--warning .notifitem__dot { background: var(--color-warning); }
.notifitem--danger .notifitem__dot  { background: var(--color-danger); }
.notifitem__main { flex: 1 1 auto; min-width: 0; }
.notifitem__title { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); text-decoration: none; }
a.notifitem__title:hover { text-decoration: underline; }
.notifitem__body { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 2px; word-break: break-word; }
.notifitem__meta { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 4px; }
.notifitem__actions { flex: 0 0 auto; display: flex; gap: 2px; }
.notifitem__act {
  border: none; background: none; color: var(--color-text-muted); cursor: pointer;
  width: 24px; height: 24px; border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: 1;
}
.notifitem__act:hover { background: var(--color-surface-2); color: var(--color-text); }

/* ===========================================================================
   M365 Cockpit (skill pp-m365) – flotila, dashboard, wizard, bloky, assessment
   =========================================================================== */

/* Navigaci tenantu nese panel pracovního prostoru (.ws-rail), výstrahy
   souhlasu .flash – stará vodorovná lišta, odznak tieru a lišta souhlasu zrušeny (ui-std). */

/* Varovná karta (appka/tenant chybí) */
.m365-warn-text { color: var(--color-warning-text); font-size: var(--fs-sm); }

/* „Jak to funguje" kroky */
.m365-howto .m365-steps { margin: var(--sp-2) 0 0; padding-left: 1.3em; }
.m365-steps li { margin-bottom: 6px; }

/* Menší nadpisy karet v M365 cockpitu (dle mockupu = fs-md). */
.m365-layout .card__title, .m365-conn .card__title { font-size: var(--fs-md); }


/* Wizard (consent / deploy) */
.m365-wizard { display: flex; flex-direction: column; gap: var(--sp-3); }
.m365-step { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4); }
.m365-step__num { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-surface-2); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center;
  font-weight: 700; border: 2px solid var(--color-border); }
.m365-step.is-current .m365-step__num { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.m365-step.is-done .m365-step__num { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.m365-step.is-disabled { opacity: .6; }
.m365-step__body { flex: 1; min-width: 0; }
.m365-ok { color: var(--color-success-text); font-weight: 600; }

/* Delivery radio bloky */
.m365-delivery, .m365-bundle-pick, .m365-tpl-pick { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.m365-radio { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.m365-radio:hover { border-color: var(--color-primary); }
.m365-radio input { margin-top: 3px; }
.m365-check { display: flex; gap: var(--sp-2); align-items: flex-start; }
.m365-tpl-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.m365-tpl-pickbox { flex: 1; min-width: 0; }
.m365-tpl-grouph { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-text-muted); margin: var(--sp-4) 0 var(--sp-2); padding-bottom: 4px; border-bottom: 1px solid var(--color-border); }
.m365-tpl-grouph:first-child { margin-top: 0; }
.m365-tpl-row.is-deployed { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 7%, transparent); }
.m365-deployed-badge { white-space: nowrap; }
/* Náhled šablon vybraného balíčku (krok 3): řádky „budou nasazeny" + zamčené checkboxy. */
.m365-tpl-mode { font-weight: 600; margin: var(--sp-2) 0 0; }
.m365-custom-templates.is-bundle-preview .m365-tpl-row { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.m365-custom-templates.is-bundle-preview .m365-tpl-pickbox { cursor: default; }
.m365-custom-templates.is-bundle-preview .m365-tpl-pickbox input { cursor: default; }

/* Odkaz na consent (kopírování) */
.m365-link-box { margin-top: var(--sp-4); padding: var(--sp-3); background: var(--color-surface-2); border-radius: var(--radius-md); }
.m365-copyrow { display: flex; gap: var(--sp-2); align-items: center; }
.m365-copyrow .input { flex: 1; font-size: var(--fs-sm); }

/* Form grid */
.m365-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
.m365-form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 720px) { .m365-form-grid { grid-template-columns: 1fr; } }
/* Průvodce krok 4: jeden blok nastavení na modul (název modulu nahoře). */
.m365-wz-block { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4) var(--sp-4); margin: var(--sp-3) 0 0; min-width: 0; }
.m365-wz-block__title { font-weight: 600; padding: 0 var(--sp-2); margin-left: calc(-1 * var(--sp-2)); }
.m365-form-actions { display: flex; align-items: end; align-self: end; gap: var(--sp-2); justify-content: flex-end; }
.m365-create > summary { list-style: none; }
.m365-create > summary::-webkit-details-marker { display: none; }

/* Řádkové akce v tabulkách */
.m365-rowact { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.m365-rowact form { display: inline; }
/* POZOR na <td class="m365-rowact">: `display:flex` PREBIJE `display:table-cell`,
   bunka tim vypadne z rozvrzeni tabulky a radek se rozjede - obsah ostatnich
   bunek se prestane svisle zarovnavat a akce se posunou mimo svuj sloupec.
   Na sirokem displeji proto bunka zustava bunkou a flexuje se az uvnitr.
   Uzky displej (`table--stack` pod 640 px) meni `td` na blok zamerne, tam se
   tohle pravidlo neuplatni. */
@media (min-width: 640px) {
  td.m365-rowact, th.m365-rowact {
    display: table-cell; vertical-align: middle; text-align: right; white-space: nowrap;
  }
  td.m365-rowact > *, th.m365-rowact > * { vertical-align: middle; }
  td.m365-rowact form { display: inline-block; }
}

/* Důvod neověřeného výsledku v řádku kontroly. Je to vysvětlení, ne zjištěná
   hodnota - odliší se kurzívou a zkrátí, ať řádek nepřeteče. Celé znění je
   v atributu `title` a v kartě Posouzení. */
.ai-row__why { font-style: italic; max-width: 46ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* Bublina s počtem čekajících kontrol je ODKAZ. `.badge` je `inline-flex`,
   takže si `<a>` drží tvar bubliny; doplňuje se jen chování odkazu. */
.ai-pendlink { text-decoration: none; cursor: pointer; }
.ai-pendlink:hover { filter: brightness(0.94); }

/* TÁŽ PAST U `.t-sub`. Ta třída má `display: block` (aby se pod nadpisem
   zalomila na vlastní řádek), jenže se dává i přímo na `<td>` - a `display:block`
   PŘEBIJE `display:table-cell` úplně stejně jako flex výš. Buňka se obalí
   anonymní buňkou, obsah se přestane zarovnávat se zbytkem řádku a pod textem
   zůstane bílý pruh: anonymní buňka nedědí pozadí řádku, takže se u zvýrazněného
   řádku (`.is-current-row`) prokreslí podklad karty.
   Na `<td>` tedy zůstává buňkou; velikost a barva písma z `.t-sub` platí dál. */
@media (min-width: 640px) {
  td.t-sub, th.t-sub { display: table-cell; vertical-align: middle; }
}

/* Detail zařízení – svislý seznam akcí (sync/restart/zakázat/retire/wipe/smazat) */
.m365-dev-actions { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.m365-dev-actions form { display: block; width: 100%; }
.m365-dev-actions .btn { width: 100%; justify-content: flex-start; }

/* Detail – dvousloupcový layout s pravým railem (vzor mockup m365-device-detail) */
.m365-detail { display: grid; gap: var(--sp-5); align-items: start; }
.m365-detail__col { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
@media (min-width: 1081px) { .m365-detail { grid-template-columns: 1fr 340px; } }

/* Detail – fallback při nemožné app-only změně vlastníka (cloud zařízení) */
.m365-owner-fallback { margin-top: var(--sp-3); }
.m365-owner-fallback .field__hint { margin: var(--sp-1) 0 var(--sp-2); }

/* Kategorie zařízení (modal na seznamu zařízení) */
.m365-devcat-list { max-height: 320px; overflow-y: auto; margin-bottom: var(--sp-4); }
.m365-devcat-sub { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 600; }
.m365-devcat-add, .m365-devcat-import { padding-top: var(--sp-3); border-top: 1px solid var(--color-border); margin-top: var(--sp-3); }
.m365-devcat-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.m365-devcat-row .input { flex: 1 1 160px; min-width: 140px; }
.m365-devcat-row .select { flex: 1 1 220px; }
.m365-devcat-row .btn { flex: 0 0 auto; }

/* Detail – informační řádek (label + hodnota) v railu Identita */
.m365-si { padding: var(--sp-3); background: var(--color-surface-2); border-radius: var(--radius-sm); margin-bottom: var(--sp-2); }
.m365-si:last-child { margin-bottom: 0; }
.m365-si__l { font-size: var(--fs-xs); color: var(--color-text-muted); }
.m365-si__v { font-weight: 600; font-size: var(--fs-sm); margin-top: 3px; word-break: break-all; }

/* Code / poznámky */
.m365-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre; resize: vertical; overflow: auto; line-height: 1.5; }
.m365-code--tall { min-height: 60vh; }
.m365-help { margin-top: var(--sp-2); }
.m365-help > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.m365-help code { background: color-mix(in srgb, var(--color-text) 8%, transparent); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.m365-help ul { margin: 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: 4px; }
.m365-help__body { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--color-text-muted); }
.m365-help__body p { margin: 0; }
.m365-help__body strong { color: var(--color-text); }
.m365-help__note { font-style: italic; }
.m365-help pre { margin: 0; background: color-mix(in srgb, var(--color-text) 6%, transparent); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre; }
.m365-empty { text-align: center; }

/* Secure score gauge */
.m365-gauge { --pct: 0; width: 130px; height: 130px; margin: 0 auto var(--sp-2);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--color-primary) calc(var(--pct) * 1%), var(--color-surface-2) 0); }
.m365-gauge__val { width: 96px; height: 96px; border-radius: 50%; background: var(--color-surface);
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }

/* Assessment */
.m365-sevrow { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ── Přehled tenantu (overview) – rail layout, KPI, hero, feed ───────────── */
.m365-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-4); align-items: start; }
.m365-stack { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
@media (max-width: 1000px) { .m365-layout { grid-template-columns: 1fr; } }

/* Bezpečnostní hero (gauge + doporučení) */
.m365-hero { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.m365-hero .m365-gauge { margin: 0; flex: 0 0 auto; }
.m365-hero__txt { flex: 1 1 0; min-width: 200px; }
.m365-hero__sum { margin: 0 0 var(--sp-2); }
.m365-rec { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 0; }
.m365-rec__t { font-size: var(--fs-sm); }
.sev { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); }
.sev--h { background: var(--color-danger); }
.sev--m { background: var(--color-warning); }
.sev--l { background: var(--color-success); }
.m365-empty-inline { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }

/* Skóre gauge (kruhový graf jako v mockupu): barva prstence dle skóre + číslo + popisek */
.m365-gauge--score { --ring: var(--color-success); width: 138px; height: 138px;
  background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--color-surface-2) 0); }
.m365-gauge--score.is-low { --ring: var(--color-danger); }
.m365-gauge--score.is-mid { --ring: var(--color-warning); }
.m365-gauge--score .m365-gauge__val { flex-direction: column; gap: 0; width: 104px; height: 104px; }
.m365-gauge__num { font-size: 30px; font-weight: 800; line-height: 1; color: var(--color-text); }
.m365-gauge__cap { font-size: 9px; line-height: 1.25; text-align: center; margin-top: 3px;
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* KPI dlaždice */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 640px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-text); transition: border-color .12s, box-shadow .12s; }
.metric:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.metric__lbl { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.metric__val { font-size: 26px; font-weight: 700; line-height: 1.1; }
.metric__val--up { color: var(--color-success-text); }
.metric__val--down { color: var(--color-danger-text); }
.metric__sub { font-size: 12px; color: var(--color-text-muted); min-height: 14px; }
/* Více prostoru mezi KPI dlaždicemi a navazujícím obsahem (licence). */
.m365-kpi-gap { margin-bottom: var(--sp-5); }

/* Licence – detail: dílčí plány (service plans) jako čipy */
.chipset { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lchip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-muted); }
.lchip--on { background: var(--color-success-soft, var(--color-surface-2)); color: var(--color-success, var(--color-text)); }
/* Řádkové akce v tabulce zarovnat doprava (Odebrat / Přidělit …). */
.m365-rowact { justify-content: flex-end; }
/* Výběr dílčích plánů v modalu přidělení licence. */
.m365-planpick { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
/* Neaktivní / smazané předplatné v tabulce – ztlumený řádek. */
.table tr.is-inactive td { color: var(--color-text-muted); }

/* Karta: textový „count" místo čísla */
.card__count--text { font-size: 12px; color: var(--color-text-muted); font-weight: 400; }

/* Feed posledních akcí */
.m365-feed { display: flex; flex-direction: column; gap: 2px; }
.m365-feed__row { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 0; border-top: 1px solid var(--color-border); }
.m365-feed__row:first-child { border-top: 0; }
.m365-feed__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.m365-feed__dot.od--ok { background: var(--color-success); }
.m365-feed__dot.od--err { background: var(--color-danger); }
.m365-feed__dot.od--info { background: var(--color-warning); }
.m365-feed__t { flex: 1 1 0; min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m365-feed__t code { font-size: 11px; }
.m365-feed__time { flex: 0 0 auto; font-size: 11px; }

/* Kontrola nastavení tenantu – řádek kontroly */
.m365-check-row { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--color-border); }
.m365-check-row:first-child { border-top: 0; }
.m365-check-row__status { flex: 0 0 auto; padding-top: 2px; }
.m365-check-row__badge { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 700; padding: 0; }
.m365-check-row__body { flex: 1; min-width: 0; }
.m365-check-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.m365-check-row__label { font-size: var(--fs-md); }
.m365-check-row__lbl { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.m365-sevchip { font-size: 10px; padding: 1px 7px; text-transform: uppercase; letter-spacing: .03em; }
.m365-check-row__value { white-space: nowrap; font-size: var(--fs-sm); }
.m365-check-row__desc { margin: 4px 0 6px; font-size: var(--fs-sm); }
.m365-check-row__rec { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 8px; font-size: var(--fs-sm); }
.m365-check-row__rec svg { flex: 0 0 auto; margin-top: 2px; color: var(--color-brand-text); }
.m365-check-row__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
.m365-check-row__links .link { display: inline-flex; align-items: center; gap: 4px; }
.m365-soon { opacity: .8; }
/* Nastavení tenant-settingu z assessmentu (switch / choice / text) */
.m365-setrow { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.m365-setform { display: inline-flex; gap: var(--sp-2); align-items: center; margin: 0; }
.m365-setrow .input { width: auto; min-width: 220px; height: var(--control-h-sm); padding: 4px 8px; }
.m365-setrow select.input { min-width: 240px; }
.m365-trend { display: flex; gap: 6px; align-items: flex-end; height: 120px; padding-top: 4px; }
.m365-trend__col { flex: 1 1 0; min-width: 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.m365-trend__num { font-size: 10px; line-height: 1; color: var(--color-text-muted); margin-bottom: 2px; }
.m365-trend__bar { width: 100%; background: var(--color-primary); border-radius: 3px 3px 0 0; min-height: 3px; }

/* Bezpečnostní přehled (m365_security) – mřížka indikátorů + doporučení karty */
.m365-indgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (max-width: 900px) { .m365-indgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .m365-indgrid { grid-template-columns: 1fr; } }
.m365-indgrid .m365-si { margin-bottom: 0; }
.m365-indgrid .m365-si__v { display: flex; align-items: center; gap: 6px; }
.m365-card-rec { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--color-border); font-size: var(--fs-sm); }
.m365-card-rec:first-of-type { border-top: 0; }
.m365-card-rec__t { flex: 1; min-width: 0; }
.m365-card-rec .btn { flex: 0 0 auto; white-space: nowrap; }
.m365-card-rec__sev { flex: 0 0 auto; min-width: 64px; text-align: center; }
.m365-area-lock { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4);
  background: var(--color-surface-2); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--fs-sm); }
.m365-area-lock svg { flex: 0 0 auto; color: var(--color-text-subtle); }

/* Nálezy z uložené kontroly (m365_assessment) */
.m365-finding { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) 0; border-top: 1px solid var(--color-border); }
.m365-finding:first-of-type { border-top: 0; }
.m365-finding > .sev { margin-top: 6px; }
.m365-finding > .badge { margin-top: 1px; }
.m365-finding__body { flex: 1; min-width: 0; }
.m365-finding__body strong { font-size: var(--fs-md); }
.m365-finding__body p { margin: 4px 0 0; font-size: var(--fs-sm); }
.m365-finding__act { flex: 0 0 auto; }

/* Detail uživatele – hlavička + avatar */
.m365-ud-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4); }
.m365-ud-head__main { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.m365-ud-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }
.m365-ud-head .pu-actions { flex-wrap: wrap; gap: var(--sp-2); }
.m365-ud-head .pu-actions form { display: inline; }

/* Nový uživatel – heslo / UPN řádky */
.m365-pwd-row { display: flex; gap: var(--sp-2); align-items: center; max-width: 520px; }
.m365-pwd-row .input { flex: 1; font-family: ui-monospace, monospace; }
.m365-pwd-opts { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.m365-upn-row { display: flex; gap: 6px; align-items: center; }
.m365-upn-row .input { flex: 1 1 40%; min-width: 0; }
.m365-upn-at { color: var(--color-text-muted); font-weight: 600; }
.m365-upn-dom { flex: 1 1 55%; }
.m365-count { font-size: var(--fs-sm); }

/* Detail uživatele – boční (vertikální) menu sekcí */
.m365-ud-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-4); align-items: start; }
.m365-ud-side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--sp-3); }
.m365-ud-side__link { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font-size: var(--fs-sm); border: 1px solid transparent; }
.m365-ud-side__link:hover { background: var(--color-surface-2); }
.m365-ud-side__link.is-active { background: var(--color-surface-2); border-color: var(--color-border); font-weight: 600; color: var(--color-brand-text); }
.m365-ud-side__link svg { flex: 0 0 auto; }
.m365-ud-content { min-width: 0; }
/* Základní info – přehledná, vzdušná mřížka klíč/hodnota (2 sloupce). */
.m365-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 720px) { .m365-info { grid-template-columns: 1fr; } }
.m365-info__item { display: flex; flex-direction: column; gap: 5px; padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.m365-info__lbl { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-text-muted); font-weight: 600; }
.m365-info__lbl svg { color: var(--color-text-muted); flex: 0 0 auto; }
.m365-info__val { font-size: var(--fs-md, 14px); overflow-wrap: anywhere; }
.m365-info__val code { font-size: 12px; }

/* Pick-list v modalu (přidat do skupiny) */
.m365-picklist { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto;
  margin: var(--sp-2) 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 6px; }
.m365-pick { display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-3); border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; cursor: pointer; color: var(--color-text); font: inherit; }
.m365-pick:hover { background: var(--color-surface-2); }
.m365-pick.is-sel { background: var(--color-brand-soft); border-color: var(--color-brand); }
.m365-pick > svg { flex: 0 0 auto; color: var(--color-text-muted); }
.m365-pick__main { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.m365-pick__meta { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-sort[data-sort] { cursor: pointer; }

/* Mailbox – e-mailové adresy */
.m365-mailaddr__primary { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.m365-mailaddr__primary code { font-size: var(--fs-lg, 16px); font-weight: 700; }
.m365-mailaddr__aliases { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.m365-mailaddr__hint { margin-top: var(--sp-4); }
.m365-ro-val { min-height: var(--control-h-sm, 34px); display: flex; align-items: center; }
.m365-ar-text { min-height: 180px; resize: vertical; }
.m365-mbx-adv { margin-top: var(--sp-5); }

/* Reset hesla – stepper, jazyk taby, náhled dopisu */
.m365-stepper { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.m365-step { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.m365-step__n { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-2); border: 1px solid var(--color-border); font-weight: 700; font-size: 12px; }
.m365-step.is-current { color: var(--color-text); font-weight: 600; }
.m365-step.is-current .m365-step__n { background: var(--color-brand-soft); border-color: var(--color-brand); color: var(--color-brand-text); }
.m365-step.is-done .m365-step__n { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.m365-step__line { flex: 1 1 auto; height: 1px; background: var(--color-border); max-width: 80px; }

.m365-langtabs { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.m365-langtabs button { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 26px;
  border: 0; border-left: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted);
  font-size: 11px; font-weight: 700; letter-spacing: .03em; cursor: pointer; text-align: center; line-height: 1; }
.m365-langtabs button:first-child { border-left: 0; }
.m365-langtabs button:hover { background: var(--color-surface-2); }
.m365-langtabs button.is-active { background: var(--color-brand); color: #fff; }

/* Reset hesla – přihlašovací údaje (definiční seznam) */
.m365-cred { display: grid; grid-template-columns: 160px 1fr; margin: 0; }
.m365-cred dt, .m365-cred dd { padding: 10px 0; border-top: 1px solid var(--color-border); margin: 0; min-height: 24px; display: flex; align-items: center; }
.m365-cred > :nth-child(1), .m365-cred > :nth-child(2) { border-top: 0; }
.m365-cred dt { color: var(--color-text-muted); font-size: var(--fs-sm); }
.m365-cred dd { gap: var(--sp-2); flex-wrap: wrap; }
.m365-cred__pw { font-family: ui-monospace, monospace; font-weight: 700; font-size: var(--fs-md, 15px);
  background: var(--color-brand-soft); color: var(--color-brand-text); padding: 3px 10px; border-radius: var(--radius-sm); }
@media (max-width: 560px) { .m365-cred { grid-template-columns: 1fr; } .m365-cred dt { border-top: 1px solid var(--color-border); padding-bottom: 0; } .m365-cred dd { border-top: 0; padding-top: 4px; } }


.m365-letter { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--sp-5); box-shadow: var(--shadow-sm); position: sticky; top: var(--sp-3); }
.m365-letter__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); border-bottom: 1px solid var(--color-border); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); }
.m365-letter__top h3 { margin: 0; font-size: var(--fs-md, 15px); }
.m365-letter__logo { width: 40px; height: 40px; border-radius: 8px; background: var(--color-brand-soft); color: var(--color-brand-text);
  display: flex; align-items: center; justify-content: center; font-weight: 800; flex: 0 0 auto; }
.m365-letter__body { font-size: var(--fs-sm); line-height: 1.6; color: var(--color-text); }
.m365-letter__foot { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-muted); }
.m365-secret { font-family: ui-monospace, monospace; }
/* Readonly → Edit: akce (Uložit) skryté, dokud uživatel neklikne na „Upravit". */
.m365-editform .m365-edit-actions { display: none; }
.m365-editform.is-editing .m365-edit-actions { display: flex; }
.m365-editform.is-editing .input { background: var(--color-surface); }
.m365-editform .input[readonly], .m365-editform .input[disabled] { background: var(--color-surface-2); cursor: default; }
@media (max-width: 760px) {
  .m365-ud-layout { grid-template-columns: 1fr; }
  .m365-ud-side { position: static; flex-direction: row; flex-wrap: wrap; overflow-x: auto; }
}

/* OneDrive kvóta */
.m365-od-quota { margin-bottom: var(--sp-3); }
.m365-od-bar { height: 12px; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; margin-bottom: 6px; }
.m365-od-bar__fill { height: 100%; background: var(--color-primary); border-radius: 999px; }

/* Dashboard: úzký „Stav připojení" + široký „Provozní deník" */
.m365-dash-cols { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: var(--sp-4); align-items: start; }
.m365-dash-cols .pu-actions { flex-wrap: wrap; gap: var(--sp-2); }
@media (max-width: 860px) { .m365-dash-cols { grid-template-columns: 1fr; } }

/* Bundly + secrets */
.m365-bundles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.m365-bundle { padding: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.m365-bundle h3 { font-size: var(--fs-md); margin: 0 0 4px; }
.m365-bundle__items { font-size: 12px; color: var(--color-text-muted); font-family: ui-monospace, monospace; }
.m365-secrets { border-left: 3px solid var(--color-warning); }
.m365-secret { font-size: 14px; }
.m365-pf-list { margin: var(--sp-2) 0 0; padding-left: 1.2em; }
.m365-preflight-result { margin-top: var(--sp-3); }

/* Onboarding contact picker (autocomplete) */
.m365-picker__box { position: relative; max-width: 520px; }
.m365-picker__results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  max-height: 320px; overflow-y: auto; box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.m365-picker__item { display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); border: 0; background: none; cursor: pointer;
  color: var(--color-text); font-size: var(--fs-sm); }
.m365-picker__item:hover, .m365-picker__item:focus { background: var(--color-surface-2); }
.m365-picker__line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.m365-picker__meta { font-size: 11px; color: var(--color-text-muted); }
.m365-picker__badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 7px; color: var(--color-text-muted); }
.m365-picker__empty { padding: var(--sp-3); color: var(--color-text-muted); font-size: var(--fs-sm); }
.m365-switch > summary { list-style: none; }
.m365-switch > summary::-webkit-details-marker { display: none; }

/* Blokující overlay Cockpitu – spinner je sdílený .spinner.spinner--lg (S6). */
.m365-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 9999;
  display: flex; align-items: center; justify-content: center; }
.m365-overlay__box { background: var(--color-surface); padding: var(--sp-5); border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); box-shadow: 0 8px 40px rgba(0,0,0,.2); }

/* ── Skupiny: detail (statistiky) + wizard + výběr uživatelů (chips) ─────── */
.m365-stats { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.m365-stat { display: flex; flex-direction: column; gap: 2px; min-width: 96px; }
.m365-stat__n { font-size: var(--fs-lg); font-weight: 700; }
.m365-stat__l { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); }

/* Add-row: picker / select + tlačítko vedle sebe */
.m365-addrow { display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; }
.m365-addrow .m365-userpick, .m365-addrow > select.input { flex: 1; min-width: 240px; }

/* Vybraní uživatelé (chips) */
.m365-userpick__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.m365-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px;
  background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 999px; font-size: var(--fs-sm); }
.m365-chip__x { border: 0; background: none; cursor: pointer; color: var(--color-text-muted); font-size: 13px; line-height: 1; padding: 0 2px; }
.m365-chip__x:hover { color: var(--color-danger-text); }

/* Adresa skupiny (nickname @ doména) */
.m365-addr { display: flex; align-items: center; gap: 6px; max-width: 520px; }
.m365-addr .input { flex: 1; }
.m365-addr__at { color: var(--color-text-muted); }

/* Wizard – indikátor kroků + přepínání obsahu */
.m365-wiz__steps { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.m365-wiz__stepitem { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: var(--fs-sm); }
.m365-wiz__stepitem:not(:last-child)::after { content: ""; width: 18px; height: 1px; background: var(--color-border); margin-left: var(--sp-2); }
.m365-wiz__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--color-border); font-size: 12px; font-weight: 700; }
.m365-wiz__stepitem.is-active { color: var(--color-text); }
.m365-wiz__stepitem.is-active .m365-wiz__num { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.m365-wiz__step { display: none; }
.m365-wiz__step.is-active { display: block; }
.m365-wiz__nav { display: flex; align-items: center; gap: var(--sp-2); }

/* Type-karty (radio výběr typu skupiny) */
.m365-typecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.m365-typecard { display: block; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-3); cursor: pointer; }
.m365-typecard:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.m365-typecard input { margin-right: 6px; }
.m365-typecard__t { display: block; font-weight: 600; }
.m365-typecard__d { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 4px; }

/* Detail skupiny: read-only odznak, seznam osob (memlist), drobné utility */
.ro-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  color: var(--color-text-muted); background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
.subtle { color: var(--color-text-muted); font-size: var(--fs-sm); }
.memlist { display: flex; flex-direction: column; }
.mem { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.mem:last-child { border-bottom: 0; }
.mem__n { font-weight: 600; }
.mem__upn { color: var(--color-text-muted); }
.mem form, .mem .mem__x { margin-left: auto; }
.av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 50%; background: var(--color-brand-soft, var(--color-surface-2)); color: var(--color-brand, var(--color-text));
  font-size: 11px; font-weight: 700; }
.card__body--flush { padding: 0; }
.card__pad { padding: var(--sp-4); }

/* Akce v hlavičce stránky – jednotné svislé zarovnání (link/button/form/span) */
.pu-actions > * { align-self: center; }
.pu-actions > form { display: inline-flex; align-items: center; }
.js-ro-actions { align-items: center; gap: var(--sp-2); }

/* Detail skupiny: titulky karet jako na Přehledu (menší) */
.js-m365-grpedit .card__title { font-size: var(--fs-md); }

/* Základní údaje: název | popis (popis širší), typ užší; ID | datum vedle sebe */
.m365-gbasic { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.m365-gmeta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--sp-3); }
@media (max-width: 780px) {
  .m365-gbasic, .m365-gmeta { grid-template-columns: 1fr; }
}

/* Modal s našeptávačem: dropdown smí vystoupit z těla (neořezávat) + výška */
.modal__body--picker { overflow: visible; min-height: 320px; }

/* ── Školení (training) modul ─────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.form-grid .field { margin-bottom: 0; }
.form-grid .field--full { grid-column: 1 / -1; }
.field--check { align-self: end; padding-bottom: var(--sp-2); }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

.stat-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.stat-card { flex: 1 1 140px; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-5); }
.stat-card__n { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--color-text); }
.stat-card__l { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 2px; }

.detail-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); align-items: start; }
@media (max-width: 980px) { .detail-cols { grid-template-columns: 1fr; } }

.tr-customer { margin-top: var(--sp-4); }
.tr-customer > summary { cursor: pointer; font-weight: 600; color: var(--color-brand-text); margin-bottom: var(--sp-3); }
.tr-result { margin-top: var(--sp-5); background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-5); }
.tr-result__t { width: 100%; border-collapse: collapse; }
.tr-result__t td { padding: 4px 0; }
.tr-result__total td { border-top: 1px solid var(--color-border); padding-top: 8px; font-size: var(--fs-lg); }
.tr-result__actions { margin-top: var(--sp-4); text-align: right; }

.tr-versions { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.tr-versions li { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 0;
  border-top: 1px solid var(--color-border); font-size: var(--fs-sm); }
.tr-versions li .muted { margin-left: auto; }
.tr-pdf-gen { display: grid; gap: var(--sp-3); }
.mt-2 { margin-top: var(--sp-3); }
.input--sm { padding: 4px 8px; font-size: var(--fs-sm); }

/* Pole „Dodavatel" na nabídce školení (self/saved/new). */
.tr-supplier__modes { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.tr-supplier .radio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); cursor: pointer; }
.tr-supplier__pane { margin-top: var(--sp-2); }
.tr-supplier__pane[hidden] { display: none; }
.tr-supplier__pane [data-sup-filter] { margin-bottom: var(--sp-2); }

/* Přílohy v modalu „Odeslat e-mailem" – aktuální PDF + uložené verze (víc příloh). */
.tr-mail-atts { display: grid; gap: var(--sp-1); margin-top: var(--sp-1); }
.tr-mail-atts .check { font-size: var(--fs-sm); }
/* Vysoká textarea + seznam verzí přeteče obrazovku; .modal__box má overflow:hidden,
   takže bez tohoto stropu by se uřízla patička s tlačítky. */
.tr-mail-modal .modal__body { max-height: 70vh; overflow-y: auto; }
/* POZOR: pole má třídu .input, a ta má pevnou `height: var(--control-h)` – atribut
   rows je pak bez účinku (pole zůstane na ~2 řádky). Výšku musí povolit CSS. */
.tr-mail-modal textarea.input {
  height: auto; min-height: calc(var(--control-h) * 3); padding: var(--sp-3);
  line-height: 1.5; resize: vertical;
}

/* =====================================================================
   Naplánované úlohy – trvalý filtr seznamu (pp-scheduler)
   ===================================================================== */
.sched-filter {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
}
.sched-filter .field { margin: 0; min-width: 190px; }
.sched-filter__grow { flex: 1 1 260px; min-width: 220px; }
.sched-filter__actions { display: flex; gap: var(--sp-2); align-items: center; margin-left: auto; }
@media (max-width: 720px) {
  .sched-filter .field, .sched-filter__grow { flex: 1 1 100%; min-width: 0; }
  .sched-filter__actions { margin-left: 0; width: 100%; }
}

/* =====================================================================
   Naplánované úlohy – kalendářní přehled (pp-scheduler /calendar)
   Mřížka dny × čas, bloky obarvené dle vlastníka, detekce souběhů.
   ===================================================================== */
.sched-cal-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
}
.sched-cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.sched-cal-range { font-size: var(--fs-sm); white-space: nowrap; }
.sched-cal-wins { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

.sched-cal-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.sched-cal-legend__item { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.sched-cal-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--sc, var(--color-brand)); flex: none; }

.sched-cal-overlaps .badge--danger { white-space: nowrap; }

/* --- Mřížka --------------------------------------------------------- */
.sched-cal {
  --sched-rowh: 46px;
  display: grid;
  min-width: max-content;
  background: var(--color-surface);
}
.sched-cal__corner {
  position: sticky; left: 0; top: 0; z-index: 4;
  background: var(--color-surface-2);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.sched-cal__dayhead {
  position: sticky; top: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-2) var(--sp-1);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  text-align: center;
}
.sched-cal__dayhead.is-weekend { background: var(--color-bg); }
.sched-cal__dayhead.is-today { background: var(--color-brand-soft); box-shadow: inset 0 -2px 0 var(--color-brand); }
.sched-cal__dow { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: capitalize; }
.sched-cal__date { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* Časová osa – sticky vlevo; sticky zároveň slouží jako kontext pro absolutní popisky. */
.sched-cal__timeaxis {
  position: sticky; left: 0; z-index: 2;
  height: calc(var(--sched-rowh) * var(--sched-span));
  background: var(--color-surface-2);
  border-right: 1px solid var(--color-border);
}
.sched-cal__hour {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-size: var(--fs-xs); color: var(--color-text-subtle); white-space: nowrap;
}
.sched-cal__daybody {
  position: relative;
  height: calc(var(--sched-rowh) * var(--sched-span));
  border-left: 1px solid var(--color-border);
  background-image: linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
  background-size: 100% calc(100% / var(--sched-span));
}
.sched-cal__daybody.is-weekend { background-color: color-mix(in srgb, var(--color-bg) 60%, transparent); }
.sched-cal__daybody.is-today { background-color: color-mix(in srgb, var(--color-brand-soft) 35%, transparent); }
.sched-cal__now { position: absolute; left: 0; right: 0; height: 2px; background: var(--color-danger); z-index: 5; }
.sched-cal__now::before {
  content: ""; position: absolute; left: -3px; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger);
}

.sched-cal__block {
  position: absolute; overflow: hidden;
  padding: 2px 5px; border-radius: var(--radius-sm);
  border-left: 3px solid var(--sc, var(--color-brand));
  background: var(--scb, var(--color-brand-soft));
  color: var(--color-text);
  font-size: var(--fs-xs); line-height: 1.25;
  cursor: default; min-height: 16px;
}
.sched-cal__block-time { font-weight: var(--fw-semibold); margin-right: 4px; }
.sched-cal__block-name { color: var(--color-text-muted); }
.sched-cal__block.is-overlap { box-shadow: 0 0 0 1.5px var(--color-danger); }
.sched-cal__block.is-overlap::after {
  content: "\26A0"; position: absolute; top: 1px; right: 3px;
  font-size: 10px; color: var(--color-danger-text);
}

/* --- Paleta vlastníků (kategorická, 8 odstínů) --------------------- */
.sched-c0 { --sc: #0339a6; --scb: #e7edf8; }
.sched-c1 { --sc: #1c8c4a; --scb: #e4f4ea; }
.sched-c2 { --sc: #7b3fb0; --scb: #efe6f7; }
.sched-c3 { --sc: #c47a00; --scb: #fbf1da; }
.sched-c4 { --sc: #0d8a94; --scb: #dcf1f2; }
.sched-c5 { --sc: #c0392b; --scb: #fbe4e1; }
.sched-c6 { --sc: #2b6fd6; --scb: #e3edfb; }
.sched-c7 { --sc: #9c5a2c; --scb: #f2e7dc; }

:root[data-theme="dark"] .sched-c0 { --scb: #16263f; }
:root[data-theme="dark"] .sched-c1 { --scb: #11291c; }
:root[data-theme="dark"] .sched-c2 { --scb: #241634; }
:root[data-theme="dark"] .sched-c3 { --scb: #2a2410; }
:root[data-theme="dark"] .sched-c4 { --scb: #10282a; }
:root[data-theme="dark"] .sched-c5 { --scb: #2a1614; }
:root[data-theme="dark"] .sched-c6 { --scb: #16263f; }
:root[data-theme="dark"] .sched-c7 { --scb: #241a10; }

@media (max-width: 640px) {
  .sched-cal-toolbar { flex-direction: column; align-items: stretch; }
  .sched-cal { --sched-rowh: 40px; }
}

/* ===========================================================================
   Expirace (/expiry, nástroj toolboxu) – doplňkové třídy .exp-*.
   Používá sdílené komponenty (card, table--stack, badge, modal, chips, empty);
   zde jen specifika: stat dlaždice, ikona zdroje, „za N dní" barvení.
   =========================================================================== */
.page-head__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Filtry na jednom řádku (vodorovný scroll na úzkém displeji místo zalomení). */
.filters--exp { flex-wrap: nowrap; overflow-x: auto; }
.filters--exp .input--search { min-width: 160px; flex: 1 1 180px; }
.filters--exp .select { flex: 0 0 auto; }
.filters--exp .select--client { max-width: 190px; }

.table-foot { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm); }
.chip--clear { text-decoration: underline; color: var(--color-text-subtle); }

/* Stat dlaždice (proklik = předfiltrování tabulky). */
.exp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
  margin-bottom: var(--sp-5); }
.exp-stat { display: flex; flex-direction: column; gap: var(--sp-1);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); padding: var(--sp-4); color: inherit;
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease; }
.exp-stat:hover, .exp-stat:focus { text-decoration: none; box-shadow: var(--shadow-md); }
.exp-stat__lbl, .exp-stat__val { text-decoration: none; }
.exp-stat.is-active { box-shadow: var(--shadow-focus); }
.exp-stat--danger  { border-top-color: var(--color-danger); }
.exp-stat--warning { border-top-color: var(--color-warning); }
.exp-stat--info    { border-top-color: var(--color-brand-light, var(--color-accent)); }
.exp-stat--ok      { border-top-color: var(--color-success); }
.exp-stat__lbl { font-size: var(--fs-xs); color: var(--color-text-muted); }
.exp-stat__val { font-size: var(--fs-2xl); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; }

/* Zdroj / typ ve sloupci „Typ". */
.exp-src { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.exp-src__ico { width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--color-surface-2); color: var(--color-text-muted); }

/* Sloupec „Položka" – název + podtitulek. */
.exp-name { display: block; font-weight: var(--fw-medium); }
.exp-name__sub { display: block; color: var(--color-text-subtle); font-size: var(--fs-xs);
  margin-top: 1px; }

/* „za N dní" – barevný zvýrazněný údaj podle stavu. */
.exp-dleft--expired strong, .exp-dleft--danger strong { color: var(--color-danger-text); }
.exp-dleft--warning strong { color: var(--color-warning-text); }
.exp-dleft--ok strong { color: var(--color-success-text); }
.exp-dleft--unknown strong, .exp-dleft--muted strong { color: var(--color-text-subtle);
  font-weight: var(--fw-regular); }
/* Expirace na dvou řádcích (za N dní / absolutní datum) – šetří šířku. */
.exp-dleft strong { display: block; line-height: 1.2; }
.exp-dleft .subtle { display: block; margin-left: 0; }

.exp-inline { display: inline; margin: 0; }
.exp-table tr.is-muted td { opacity: .6; }

/* Dual-source (Graph + API credentials) – dva zdroje pod názvem + konflikt dat. */
.exp-srcbadges { display: inline-flex; gap: 4px; margin-top: 3px; }
.exp-srcbadge { font-size: 10px; font-weight: var(--fw-medium); padding: 1px 7px;
  border-radius: var(--radius-pill); background: var(--color-surface-2);
  color: var(--color-text-muted); border: 1px solid var(--color-border); }
.exp-srcbadge--graph { background: var(--color-accent-soft); color: var(--color-brand-text); border-color: transparent; }
.exp-srcbadge--api { background: var(--color-brand-soft); color: var(--color-brand-text); border-color: transparent; }
.exp-conflict { display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: var(--fs-xs); color: var(--color-warning-text); }

/* Modal prahů notifikací (§7.5) – chips editor. */
.exp-thr-body { display: block; }
.exp-thr-form { margin: 0 0 var(--sp-2); }
.exp-thr-h { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-2); }
.exp-thr-sep { height: 1px; background: var(--color-border); margin: var(--sp-4) 0; }
.exp-thr-foot { margin-top: var(--sp-3); }
.exp-thr-sentence { font-size: var(--fs-sm); color: var(--color-text-muted); margin: var(--sp-2) 0 0; }
.exp-thr-note { font-size: var(--fs-xs); margin: var(--sp-4) 0 0; }
.exp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2); }
.exp-chips__list { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }
.exp-chips__add { display: inline-flex; gap: var(--sp-2); align-items: center; }
.exp-chips__add .exp-chip-input { width: 90px; }
.exp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px 2px 10px;
  background: var(--color-brand-soft); color: var(--color-brand-text); border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.exp-chip button { border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; }
.exp-chip button:hover { color: var(--color-danger-text); }

@media (max-width: 980px) { .exp-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Faktury přijaté (modul invoices_received, F1) ─────────────────────────── */
.rinv-detail { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-5); align-items: start; }
.rinv-preview { width: 100%; height: 640px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); }
.rinv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.rinv-actions { display: grid; gap: var(--sp-3); max-width: 320px; }
.rinv-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.rinv-dl dt { color: var(--color-text-muted); }
.rinv-dl dd { margin: 0; }
.rinv-checklist { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.rinv-check { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.rinv-check.is-done { border-color: var(--color-success-soft); background: var(--color-success-soft); }
.rinv-check__ico { display: inline-flex; color: var(--color-text-muted); }
.rinv-check.is-done .rinv-check__ico { color: var(--color-success-text); }
.rinv-check__lbl { flex: 1; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
@media (max-width: 900px) { .rinv-detail { grid-template-columns: 1fr; } .rinv-preview { height: 420px; } }

/* ── Faktury přijaté – vytěžování (F2): zvýraznění polí ke kontrole ────────── */
.rinv-field--check .input,
.rinv-field--check .select { border-color: var(--color-warning); background: var(--color-warning-soft); }
.rinv-field--check .field__lbl { color: var(--color-warning-text); }

/* ── Faktury přijaté – vytěžovací log (F2) ────────────────────────────────── */
.rinv-exlog { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.rinv-exlog__row { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); padding: var(--sp-1) 0; border-bottom: 1px solid var(--color-border); }
.rinv-exlog__row:last-child { border-bottom: 0; }
.rinv-exlog__name { font-weight: var(--fw-medium); min-width: 150px; }
.rinv-exlog__st { color: var(--color-text-muted); min-width: 84px; }
.rinv-exlog__meta { color: var(--color-text-subtle); font-size: var(--fs-xs); flex: 1; word-break: break-word; }

/* ── Faktury přijaté – spojené doklady (jedna platba ↔ více dokladů) ───────── */
/* Řádek nese název + typ, částku, stav a akce. Na rozdíl od .rinv-exlog se ZALAMUJE
   (žádné min-width), takže se vejde i do užší karty a na mobil – dlouhý název
   dodavatele kartu nerozjede. */
.rinv-group { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.rinv-group__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.rinv-group__row:last-child { border-bottom: 0; }
.rinv-group__row .status-dot { flex: 0 0 auto; }
/* Hlavní blok se smrskává (min-width:0 kvůli overflow-wrap uvnitř flexu). */
.rinv-group__main { flex: 1 1 160px; min-width: 0; display: grid; gap: 1px; }
.rinv-group__name { font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.rinv-group__sub { color: var(--color-text-muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
/* Částka je v řádku poslední a zarovnaná doprava → čísla lícují pod sebou. */
.rinv-group__amount { flex: 0 0 auto; white-space: nowrap; text-align: right;
  font-variant-numeric: tabular-nums; }
.rinv-group__tags { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
/* Akce mají VLASTNÍ řádek zarovnaný doprava. Kdyby seděly na řádku s údaji, začínaly
   by u každého dokladu jinde (odznaky mají různou šířku – „Platící doklad" má navíc
   jeden odznak), takže by tlačítka „Odpojit" nebyla pod sebou. Vlastní řádek zarovnaný
   k pravé hraně je drží zarovnaná nezávisle na obsahu i jazyce. */
.rinv-group__act { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: var(--sp-1);
  justify-content: flex-end; align-items: center; }
.rinv-group__act form { display: inline-flex; }
/* Kompaktní varianta (krátké řádky, např. rozpoznávací pravidla dodavatele):
   akce zůstávají na řádku vpravo – zalomení má smysl jen tam, kde řádek nese
   i částku a odznaky a tlačítka by u sebe nelícovala. */
.rinv-group--compact .rinv-group__row { padding: var(--sp-1) 0; }
.rinv-group--compact .rinv-group__act { flex: 0 0 auto; margin-left: auto; }

/* Aktuálně otevřený doklad ve skupině – jemné zvýraznění, ať je jasné „kde jsem".
   Vodorovné odsazení se VYRUŠÍ záporným okrajem: podbarvení tak přesahuje ven, ale
   obsah řádku zůstane zarovnaný se zbytkem (jinak by tlačítko „Odpojit" u tohoto
   řádku sedělo o kus vlevo oproti ostatním). */
/* Podbarvení je brand-soft (token určený pro zvýraznění řádků), NE surface-2 –
   ten používá i .badge--neutral, takže by odznak stavu s řádkem splynul. */
.rinv-group__row.is-self { background: var(--color-brand-soft); border-radius: var(--radius-sm);
  padding-left: var(--sp-2); padding-right: var(--sp-2);
  margin-left: calc(var(--sp-2) * -1); margin-right: calc(var(--sp-2) * -1); }

/* Nabídka „zapamatovat dodavatele podle odesílatele" pod editací polí. */
.rinv-remember { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--color-border);
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* Otázka na vlastním řádku, obě tlačítka pod ní VEDLE SEBE (nelámat popisky). */
.rinv-remember > p { flex: 1 0 100%; margin: 0; }
.rinv-remember .btn { white-space: nowrap; }

/* ── Banka – stav napojení (F3) ────────────────────────────────────────────── */
.rinv-linkstate { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.rinv-linkstate__item { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); }

/* Dlouhý text v buňce na jeden řádek s „…" (plné znění v title). */
.cell-ellipsis { max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 639px) {
  .table.table--stack td.cell-ellipsis { max-width: none; overflow: visible; white-space: normal; }
}

/* ── Banka – modal „Najít fakturu" (F3) ────────────────────────────────────── */
.rinv-findlist { display: grid; gap: var(--sp-1); max-height: 360px; overflow-y: auto; }
.rinv-findrow { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.rinv-findrow:hover { background: var(--color-brand-soft); }
.rinv-findrow.is-near { border-color: var(--color-success); }
.rinv-findrow__main { flex: 1; min-width: 140px; font-weight: var(--fw-medium); }

/* ── Platební příkazy (Faktury přijaté F4) ───────────────────────────────── */
.rinv-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.rinv-tab { display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 4px var(--sp-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-sm); color: var(--color-text-muted); text-decoration: none; background: var(--color-surface); }
.rinv-tab:hover { background: var(--color-surface-2); color: var(--color-text); }
.rinv-tab.is-active { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-brand-contrast); font-weight: var(--fw-medium); }
.rinv-tab__count { font-variant-numeric: tabular-nums; opacity: .8; }
.rinv-tab.is-active .rinv-tab__count { opacity: 1; }
.rinv-order-new { margin-top: var(--sp-3); }
.rinv-order-new > summary { display: inline-flex; list-style: none; cursor: pointer; }
.rinv-order-new > summary::-webkit-details-marker { display: none; }
.rinv-order-form { border-top: 1px solid var(--color-border); padding-top: var(--sp-3); }
.rinv-order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); }
@media (max-width: 560px) { .rinv-order-grid { grid-template-columns: 1fr; } }
/* Inline řádek: pole (label+select) + akční tlačítko na jednom řádku (Faktury přijaté) */
.rinv-inline { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; }
.rinv-inline .field { margin-bottom: 0; flex: 1 1 180px; }
.rinv-inline .btn { flex: 0 0 auto; }
/* Akční tlačítko na řádku spárovaného pohybu – inline, zarovnané vpravo */
.rinv-exlog__act { flex: 0 0 auto; margin-left: auto; align-self: center; }
/* Ikona „odesláno účetní" (Faktury přijaté – přehled). Řazení používá portálové .th-sort. */
.rinv-acc-ico { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--color-success-text); }
.rinv-acc-ico.is-detected { color: var(--color-text-muted); }
/* Hromadné akce + výběr (Faktury přijaté F5) */
.rinv-bulkbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); background: var(--color-brand-soft); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.rinv-bulkbar__count { font-size: var(--fs-sm); color: var(--color-text-muted); }
.rinv-cbcol { width: 34px; text-align: center; }
/* Výběr odkazů ke stažení (Faktury přijaté F5, §7.5) */
.rinv-linklist { display: grid; gap: var(--sp-2); margin: var(--sp-2) 0; }
.rinv-linkrow { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--fs-sm); word-break: break-all; cursor: pointer; }
.rinv-linkrow:hover { background: var(--color-surface-2); }
.rinv-linkrow input { margin-top: 3px; flex: 0 0 auto; }

/* ==========================================================================
   SDÍLENÉ DROBNOSTI, KTERÉ ZAVEDL IPAM
   Vznikly uvnitř IPAM bloku, ale nejsou jeho: `.t-sub` a `.empty__hint`
   používá deset modulů, `.table .rowsel` každý seznam s hromadnou akcí
   a `.card__note` skoro každá karta. V bloku modulu se na ně nedalo
   přijít a hrozilo, že je někdo při úklidu IPAM smaže.

   POZOR: dřív tu stálo „Popsané v pp-design" — a nebylo (§R9.1/18). Kdo si
   to šel ověřit, nic nenašel a musel se doptat. Tyhle třídy jsou popsané
   TADY a nikde jinde; `skills/pp-design` drží TOKENY (barvy, odsazení,
   typografii), ne soupis tříd. Než sem přibude další, ověř, že ji opravdu
   používá víc modulů — jinak patří do bloku svého modulu.
   ========================================================================== */
.t-sub { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.empty__hint { font-size: var(--fs-sm); color: var(--color-text-muted); margin: var(--sp-1) 0 0; }
.card__note { margin: 0; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--color-border);
              font-size: var(--fs-xs); color: var(--color-text-muted); }
.filters--plain { padding: 0; border-bottom: 0; align-items: flex-start; gap: var(--sp-4); }
.filters--plain .field { flex: 1 1 220px; }

/* Rámeček s příkazem k opsání. Používají ho návody VŠECH integrací
   (Zabbix, Mikrotik, Omada), ne jen IPAM. */
/* ── IPAM F5: Mikrotik ─────────────────────────────────────────────────────
   `pre.code` používaly návody k integracím (Zabbix, Mikrotik) už dřív, ale
   pravidlo pro něj nikde nebylo — příkazy se tedy sázely výchozím stylem
   prohlížeče a dlouhý řádek firewall pravidla stránku roztahoval do šířky.
   Definice patří sem, ne do šablony: `<style>` v šabloně handoff §1.1 zakazuje.
   Jen tokeny, žádná hex barva ani px rozměr, kde existuje token. */
.code {
  margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, monospace); font-size: var(--fs-sm);
  line-height: 1.6; color: var(--color-text);
  /* Konfigurace routeru se needituje ručně — zalomit ji je čitelnější než
     vodorovný posuvník, ve kterém konec pravidla nikdo neuvidí. */
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}

/* UniFi: přiřazení konzole klientovi IPAM (migrace 147). Vykresluje se
   na stránce UniFi, ne v IPAM — proto stojí mimo blok modulu. */
/* Stav i akce patří do hlavičky karty konzole, ne do těla – technik má
   na první pohled vidět, komu konzole patří, bez rozklikávání. */
.unifi-cmap {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-left: auto; flex-wrap: wrap;
}

.card__count.is-bad { color: var(--color-danger-text); }
.table .rowsel { width: 40px; text-align: center; }
.table tr.is-row-active > td { background: var(--color-brand-soft); }
.select--sm { height: 30px; padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.dropdown__item.is-danger,
.dropdown__item.is-danger:hover { color: var(--color-danger-text); }
.dropdown__item.is-danger:hover, .dropdown__item.is-danger:focus-visible { background: var(--color-danger-soft); }

/* ==========================================================================
   IPAM (modul evidence síťové infrastruktury, docs/ipam-zadani.md §9)
   Výhradně tokeny z skills/pp-design/tokens.css – žádná hex barva, žádný px
   rozměr tam, kde token existuje. Barevný jazyk stavů je jednotný napříč
   pruhem utilizace, badgi i dlaždicemi (zadání §9).
   ========================================================================== */

/* Sdílené drobnosti, které IPAM zavádí (používají je i ostatní karty modulu). */

/* Dlaždice přehledu (klienti / subnety / obsazenost / nad prahem). */
.ipam-stats { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5);
              grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ipam-stat { display: block; padding: var(--sp-4) var(--sp-5); background: var(--color-surface);
             border: 1px solid var(--color-border); border-radius: var(--radius-md);
             box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
a.ipam-stat:hover { border-color: var(--color-brand); }
.ipam-stat__label { display: flex; align-items: center; gap: var(--sp-2);
                    font-size: var(--fs-xs); color: var(--color-text-muted); }
.ipam-stat__val { display: block; margin-top: var(--sp-2); font-size: var(--fs-xl);
                  font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.ipam-stat__sub { display: block; font-size: var(--fs-xs); color: var(--color-text-subtle); }
.ipam-stat.is-bad .ipam-stat__val { color: var(--color-danger-text); }

/* Utilizační pruh – barva NIKDY nenese význam sama, vždy je vedle i číslo. */
.ipam-util { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ipam-util__bar { display: inline-block; width: 84px; height: 6px; border-radius: var(--radius-pill);
                  background: var(--color-surface-2); overflow: hidden; }
.ipam-util__fill { display: block; height: 100%; background: var(--color-success); }
.ipam-util__num { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.ipam-util--warn .ipam-util__fill { background: var(--color-warning); }
.ipam-util--crit .ipam-util__fill { background: var(--color-danger); }
.ipam-util--warn .ipam-util__num { color: var(--color-warning-text); }
.ipam-util--crit .ipam-util__num { color: var(--color-danger-text); }

/* Dvousloupcový layout detailu (obsah + pravý sloupec). */
.ipam-cols { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; margin-bottom: var(--sp-5); }
@media (min-width: 960px) { .ipam-cols { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
.ipam-side { display: grid; gap: var(--sp-5); align-content: start; }

/* Cesta v hlavičce detailu (klient › VRF › VLAN › rodič). */
.ipam-path { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ipam-path__sep { color: var(--color-text-subtle); }

/* Panel „první volná adresa". */
.ipam-nextfree { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

/* Výstup kontroly proti evidenci v kalkulačce. */
.ipam-check { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--color-text-muted); }
.ipam-check__row { margin: 0 0 var(--sp-1); }

/* Našeptávač klienta (IPAM) – nahrazuje dlouhý <select> tam, kde má hlavní
   firma stovky kontaktů. Jen tokeny, žádná hex barva ani px tam, kde token je. */
.ipam-picker { position: relative; }
.ipam-picker .input { width: 100%; }
.ipam-picker .input.is-invalid { border-color: var(--color-danger); }
.ipam-picker__list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + var(--sp-1));
  margin: 0; padding: var(--sp-1); list-style: none;
  max-height: 280px; overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.ipam-picker__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); cursor: pointer;
}
.ipam-picker__item:hover, .ipam-picker__item.is-active { background: var(--color-surface-2); }
.ipam-picker__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.ipam-picker__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }
.ipam-picker__note { padding: var(--sp-3); font-size: var(--fs-sm); color: var(--color-text-muted); }
.ipam-picker__chosen { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Řádek filtrů IPAM – vejde se na jeden řádek, na úzkém displeji se místo
   zalomení vodorovně roluje (stejné chování jako .filters--exp u Expirace).
   Výběr klienta je omezený šířkou: jinak by ho `width:auto` roztáhlo podle
   nejdelšího názvu firmy a řádek by se rozpadl. */
.filters--ipam { flex-wrap: nowrap; overflow-x: auto; }
.filters--ipam .input--search { min-width: 140px; flex: 1 1 160px; }
.filters--ipam .select { flex: 0 0 auto; max-width: 132px; }
.filters--ipam .select--client { max-width: 180px; }
.filters--ipam .select--scope { max-width: 160px; }
.filters--ipam .btn { flex: 0 0 auto; white-space: nowrap; }

/* ==========================================================================
   IPAM – fyzická vrstva (F1b): strom lokalit, rozpad jména, hlášky generátoru.
   Jen tokeny z pp-design; tabulka U a racky používají běžnou `.table`.
   ========================================================================== */

/* Strom lokalit – odsazení nese `.lvl-N`, hloubka není omezená (žádná úroveň
   hierarchie není povinná, viz zadání §6.1). */
.ipam-tree { padding: var(--sp-2) var(--sp-3); }
.ipam-node { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
             padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.ipam-node:hover { background: var(--color-surface-2); }
.ipam-node.lvl-1 { padding-left: calc(var(--sp-3) + var(--sp-5)); }
.ipam-node.lvl-2 { padding-left: calc(var(--sp-3) + var(--sp-5) * 2); }
.ipam-node.lvl-3 { padding-left: calc(var(--sp-3) + var(--sp-5) * 3); }
.ipam-node.lvl-4 { padding-left: calc(var(--sp-3) + var(--sp-5) * 4); }
.ipam-node.lvl-5 { padding-left: calc(var(--sp-3) + var(--sp-5) * 5); }
.ipam-node.lvl-6 { padding-left: calc(var(--sp-3) + var(--sp-5) * 6); }
.ipam-node__ico { display: inline-flex; color: var(--color-text-muted); }
.ipam-node__name { font-weight: var(--fw-medium); }
.ipam-node__code { font-size: var(--fs-xs); color: var(--color-text-muted);
                   background: var(--color-surface-2); padding: 1px 6px; border-radius: var(--radius-sm); }
.ipam-node__code.is-missing { color: var(--color-warning-text); background: var(--color-warning-soft); }
.ipam-node__meta { font-size: var(--fs-xs); color: var(--color-text-subtle); margin-left: auto; }

/* Virtuální kořen stromu = klient (§R2.2). Není to řádek z `ipam_sites`,
   proto se odlišuje: silnější jméno, spodní linka jako předěl mezi „firmou"
   a jejími lokalitami. Zkratka, která ještě není uložená, je jen NÁVRH —
   tlumeně a kurzívou, ať se nedá splést s nastavenou hodnotou. */
/* Odsazení mezikapitolního nadpisu uvnitř karty. Bylo to inline `style` —
   jediná hodnota, ale porušovalo pravidlo „žádné inline styly".
   POZN.: sběrné schránky a párování klienta už tuhle třídu nepoužívají —
   od §N3/28 jsou to dvě samostatné karty, ne dva formuláře v jedné. */
.ipam-set__form-gap { margin-top: var(--sp-4); }

/* Úvodní věta karty. Odstavec `.muted` hned pod hlavičkou má vlastní horní
   okraj, který nad ním dělá dvojitou mezeru — dřív se to spravovalo inline
   `style="margin-top:0"` na osmi místech nastavení. */
.card__lead { margin-top: 0; }

/* Tělo panelu Zabbixu na detailu zařízení – bylo inline `style` (pravidlo 2). */
.ipam-zbx__body { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Akce uvnitř prázdného stavu („Žádné nezařazené zprávy. [Načíst ze schránky]").
   Prázdný stav má nést i cestu ven, ne jen konstatování (§1.6, krok 3). */
.empty__act { display: flex; justify-content: center; gap: var(--sp-2);
              margin-top: var(--sp-3); }
.empty__act form { margin: 0; }

/* ── Sloučené „Načíst data" v kontextovém pruhu (§R4) ────────────────────────
   Staví na generickém dropdownu (`.dropdown__menu`, `.dropdown__item`), přidává
   jen rozvržení řádku: název vlevo, stav vpravo. Žádný vlastní JS. */
/* Nabídka „Načíst data" (§N8/21). Od přesunu do řádku s navigací si
   odsazení řeší `.ipam-nav__act`, tady zbývá jen jméno, které neodkazuje
   na pruh, ve kterém už nesedí. */
.ipam-load { display: inline-flex; }
.ipam-dd { min-width: 300px; }
.ipam-dd .dropdown__item { justify-content: space-between; gap: var(--sp-4); }
.ipam-dd__name { white-space: nowrap; }
.ipam-dd__meta { margin-left: auto; font-size: var(--fs-xs);
                 color: var(--color-text-subtle); white-space: nowrap; }
/* Chybný poslední běh musí být vidět bez otevírání detailu — jinak se
   opakovaně pouští zdroj, který posledně spadl. */
.ipam-dd__meta.is-bad { color: var(--color-danger-text); }
/* Řádek „není napojeno" NENÍ akce, takže se ani nechová jako položka nabídky:
   nemá hover ani kurzor. Je to informace o tom, co by šlo zapnout. */
.ipam-dd__off { display: flex; align-items: center; justify-content: space-between;
                gap: var(--sp-4); padding: var(--sp-2) var(--sp-3);
                font-size: var(--fs-sm); color: var(--color-text-muted); }
.ipam-dd__all { justify-content: center; font-weight: var(--fw-medium); }

/* ── Skupiny fronty smíření (§R5.2) ──────────────────────────────────────────
   Hlavička skupiny je `card__head` uvnitř karty, takže potřebuje jen jemný
   předěl a menší nadpis — jinak vypadá jako druhá karta. */
/* ═══ SKUPINY NÁLEZŮ JSOU SAMOSTATNÉ BLOKY (§N10/2) ═══
   „Adresy v 10.0.0.0/24", „Rozhraní" a „Subnety" jsou tři různá rozhodnutí.
   Vývoj tohohle místa stojí za zapamatování, ať se to nevrací:
     1. linka mezi skupinami — bloky splývaly v jeden dlouhý seznam;
     2. silnější linka (3px) — vypadala jako oddělovač uvnitř jedné tabulky;
     3. mezera, ale skupiny pořád v JEDNÉ kartě — skrz mezeru vedly boční
        čáry a stín společné karty, takže to působilo jako jedna tabulka
        s dírami, ne jako samostatné bloky.
   Řešení je strukturální, ne kosmetické: každá skupina je vlastní `.card`
   (viz `pages/ipam_recon.php`), takže mezi bloky je čisté pozadí stránky.
   Rozestup dělá standardní `margin-bottom` karty — žádné vlastní pravidlo,
   ať se rytmus obrazovky neliší od zbytku portálu.

   Hlavička skupiny proto NEMÁ horní linku: kreslila by se hned pod vlastním
   rámečkem karty. */
.ipam-recon-grp .card__title { font-size: var(--fs-sm); }
.ipam-recon-grp .modal__check { margin: 0; font-size: var(--fs-xs); }

/* Kontext skupiny (§N5/38): pod nadpisem jedna věta o tom, co přijetí udělá,
   a za ní zdroje, ze kterých nálezy jsou. Blok si bere volné místo, aby počet
   a akce zůstaly vpravo tam, kde byly. */
.ipam-recon-grp__t { flex: 1 1 auto; min-width: 0; }
.ipam-recon-grp__sub { margin: 2px 0 0; font-size: var(--fs-xs);
                       color: var(--color-text-muted); }
.ipam-recon-grp__src { display: inline-block; margin-left: var(--sp-2); }
/* Stránkování má vlastní kartu pod bloky. `.pager` počítá s tím, že sedí na
   konci karty s obsahem nad sebou, a kreslí si horní linku — tady by visela
   pod rámečkem jako druhá čára. */
.ipam-recon-pager .pager { border-top: 0; }

.ipam-node--client { border-bottom: 1px solid var(--color-border); border-radius: 0; }
.ipam-node--client .ipam-node__name { font-weight: var(--fw-semibold); color: var(--color-text); }
.ipam-node__code.is-suggested { color: var(--color-text-subtle); background: none;
                                border: 1px dashed var(--color-border); font-style: italic; }

/* Kód lokality v cestě (breadcrumb detailu). */
.ipam-path__code { font-size: var(--fs-xs); color: var(--color-text-muted);
                   background: var(--color-surface-2); padding: 0 4px; border-radius: var(--radius-sm); }

/* Generátor jména: rozpad na části + hlášky (chybí zkratka / kolize / délka). */
/* Jméno zařízení: pole nemá zabírat celý řádek, aby „Generovat" zůstalo
   inline vedle něj. Nápověda patří až pod řádek. */
.ipam-name { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.ipam-name .field { flex: 1 1 14rem; min-width: 10rem; }
/* ═══ „VYGENEROVAT" NELÍCOVALO S POLEM (§N8/11) ═══
   `.field` má spodní okraj (`--sp-4`) a uvnitř `.ipam-name` se nerušil, takže
   `align-items: flex-end` zarovnal tlačítko o ten okraj NÍŽ než input. Vypadalo
   to jako překlep v rozvržení, přitom šlo o dědičnou mezeru. */
.ipam-name .field { margin-bottom: 0; }

/* Dvě karty formuláře vedle sebe (jméno × management IP, rack × ostatní).
   Karty samy nesou spodní okraj, uvnitř řádku by tedy dělaly nerovnou patu. */
.ipam-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
  align-items: start; }
.ipam-form-row > .card { margin-bottom: var(--sp-5); }
@media (max-width: 900px) { .ipam-form-row { grid-template-columns: 1fr; gap: 0; } }

/* Uložit/Zrušit stojí pod formulářem, ne v patě poslední karty — ta je od
   §N8/11 poloviční a tlačítka by v ní zůstala vlevo pod jednou z karet. */
.ipam-form-actions { display: flex; justify-content: flex-end; gap: var(--sp-2);
  margin-bottom: var(--sp-5); }

/* Pole a jeho tlačítko na JEDNOM řádku (výběr typu × „Nový typ", §N8/14).
   `.field__action` staví tlačítko POD pole, což u jedné buňky mřížky
   odsazovalo celý sloupec o výšku dalšího prvku. Nabídka se smí zúžit
   (`min-width: 0`), aby dlouhý název typu netlačil tlačítko z řádku. */
.ipam-inline-field { display: flex; gap: var(--sp-2); align-items: center; }
.ipam-inline-field .select { flex: 1 1 auto; min-width: 0; }
.ipam-inline-field .btn { flex: none; white-space: nowrap; }
/* Přidělení management IP: segment, adresa a tlačítko v jedné lince. */
.ipam-alloc { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.ipam-alloc .field--segment { flex: 1 1 20rem; }
.ipam-alloc .field--ip { flex: 0 1 14rem; min-width: 10rem; }
.ipam-parts { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.ipam-part { border: 1px solid var(--color-border); border-radius: var(--radius-sm);
             padding: var(--sp-2) var(--sp-3); background: var(--color-surface-2); }
.ipam-part__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                   font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.ipam-part__label { font-size: var(--fs-xs); color: var(--color-text-muted); }
.ipam-hn-warn { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.ipam-hn-banner { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
                  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
                  font-size: var(--fs-sm); border: 1px solid var(--color-border); }
.ipam-hn-banner b { flex: 0 0 auto; }
/* Dva bannery pod sebou se slévaly v jeden pruh a druhý se přehlédl. Mezera
   je na SOUROZENCI, ne na každém boxu, aby nevznikal odstup i tam, kde je
   banner sám (a nebylo ho pak vidět „viset"). */
.ipam-hn-banner + .ipam-hn-banner,
.ipam-hn-banner + .field__action,
.ipam-hn-banner + .table-wrap { margin-top: var(--sp-4); }
/* Akce uvnitř banneru (např. „Přijmout všechny subnety") se nesmí lepit
   na text – odsadí se doprava, na úzkém displeji se zalomí pod něj. */
.ipam-hn-banner form { margin-left: auto; }

/* Řada „Přijmout vše v subnetu" (/ipam/recon). Subnetů bývá deset i víc, takže
   se řada MUSÍ zalomit — `.field__action` má `nowrap` a při třinácti sítích
   přetékala z karty ven. `white-space: nowrap` na tlačítku zabrání tomu, aby
   se adresa sítě lámala uvnitř a rozbila jeho výšku. */
.ipam-recon-bulk { display: flex; flex-wrap: wrap; align-items: center;
                   gap: var(--sp-2); margin-top: var(--sp-4); }
.ipam-recon-bulk__lbl { font-size: var(--fs-sm); color: var(--color-text-muted); }
.ipam-recon-bulk .btn { white-space: nowrap; }
/* Hromadné přijetí všech nálezů jednoho typu (banner „nejdřív subnety", VLAN).
   Výběr záložní lokality stojí vedle tlačítka; na úzkém displeji se zalomí pod
   něj, aby banner nepřetékal z karty ven (§O3.2). */
.ipam-recon-acctype { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ipam-hn-banner.is-warn { background: var(--color-warning-soft); border-color: var(--color-warning); }
.ipam-hn-banner.is-info { background: var(--color-info-soft); border-color: var(--color-info); }
.ipam-hn-banner.is-ok   { background: var(--color-success-soft); border-color: var(--color-success); }

/* Navigace uvnitř modulu IPAM – bez ní se z přehledu (vstup z Toolboxu)
   nedalo dostat na Zařízení, Lokality, Racky ani VLAN. */
.ipam-nav { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5);
            padding-bottom: var(--sp-3); border-bottom: 1px solid var(--color-border); }
.ipam-nav__item { display: inline-flex; align-items: center; gap: var(--sp-2);
                  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-pill);
                  font-size: var(--fs-sm); color: var(--color-text-muted); text-decoration: none;
                  border: 1px solid transparent; }
.ipam-nav__item:hover { background: var(--color-surface-2); color: var(--color-text); }
.ipam-nav__item.is-active { background: var(--color-brand-soft); color: var(--color-brand-text);
                            border-color: var(--color-brand-soft); font-weight: var(--fw-medium); }

/* ---- IPAM: mřížka adres (§9.3, F2) ------------------------------ */
/* Buňka na adresu. Barevný jazyk je stejný jako u badge ve zbytku
   modulu; LEGENDA je povinná součást – bez ní jsou to hádanky. */
.ipam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
             gap: var(--sp-1); margin: var(--sp-4) 0; }
.ipam-cell { border: 1px solid var(--color-border); border-radius: var(--radius-sm);
             padding: var(--sp-1); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
             font-size: var(--fs-xs); text-align: center; text-decoration: none;
             background: var(--color-surface-2); color: var(--color-text-muted); }
a.ipam-cell:hover { border-color: var(--color-brand); box-shadow: var(--shadow-sm); }
.ipam-cell--free     { background: var(--color-success-soft); color: var(--color-success-text); border-color: transparent; }
.ipam-cell--used     { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.ipam-cell--dhcp     { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: transparent; }
.ipam-cell--res      { background: var(--color-warning-soft); color: var(--color-warning-text);
                       border-style: dashed; border-color: var(--color-warning); }
.ipam-cell--gw       { background: var(--color-info-soft); color: var(--color-info-text);
                       border-color: transparent; font-weight: var(--fw-bold); }
.ipam-cell--net      { background: var(--color-surface-2); color: var(--color-text-subtle); border-style: dashed; }
.ipam-cell--conflict { background: var(--color-danger-soft); color: var(--color-danger-text); border-color: var(--color-danger); }
.ipam-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3);
               font-size: var(--fs-xs); color: var(--color-text-muted); }
.ipam-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ipam-swatch { width: var(--sp-4); height: var(--sp-4); border-radius: var(--radius-sm);
               display: inline-block; flex: none; padding: 0; }

/* ---- IPAM: rozbalovací sekce nastavení (F2) --------------------- */
/* Nativní <details> – žádný JS. Nastavení roste (prahy, export, …),
   takže se dělí na sekce místo jednoho dlouhého sloupce polí. */
.ipam-set { border: 1px solid var(--color-border); border-radius: var(--radius-sm);
            margin-bottom: var(--sp-3); background: var(--color-surface); }
.ipam-set__head { padding: var(--sp-3); cursor: pointer; font-weight: var(--fw-semibold);
                  font-size: var(--fs-sm); color: var(--color-text); list-style: none; }
.ipam-set__head::-webkit-details-marker { display: none; }
.ipam-set__head::before { content: "▸"; display: inline-block; width: 1em;
                          color: var(--color-text-muted); }
.ipam-set[open] > .ipam-set__head::before { content: "▾"; }
.ipam-set__head:hover { background: var(--color-surface-2); }
.ipam-set__body { padding: 0 var(--sp-3) var(--sp-3); display: grid; gap: var(--sp-3); }

/* ---- IPAM: žurnál a auditní stopa (F2) -------------------------- */
/* Řádek = kolečko s iniciálami + obsah. Změny od klienta mají žlutý
   pruh vlevo, aby technik na první pohled poznal, co udělal klient. */
.ipam-jrn { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0;
       border-bottom: 1px solid var(--color-border); }
.ipam-jrn:last-child { border-bottom: 0; }
.ipam-jrn--client { border-left: 3px solid var(--color-warning);
               padding-left: var(--sp-3); background: var(--color-warning-soft); }
.ipam-jrn__av { width: var(--control-h-sm); height: var(--control-h-sm); flex: none;
           border-radius: var(--radius-pill); display: grid; place-items: center;
           background: var(--color-surface-2); color: var(--color-text-muted);
           font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.ipam-jrn__main { min-width: 0; flex: 1; }
.ipam-jrn__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
             font-size: var(--fs-xs); color: var(--color-text-muted); }
.ipam-jrn__meta b { color: var(--color-text); font-size: var(--fs-sm); }
.ipam-jrn__meta code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                  font-size: var(--fs-xs); color: var(--color-text-subtle); }
.ipam-jrn__body { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--color-text);
             white-space: pre-wrap; word-break: break-word; }
/* Diff před/po – dva sloupce, na mobilu pod sebou. */
.ipam-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
        margin-top: var(--sp-2); font-size: var(--fs-xs); }
.ipam-diff__col { display: grid; gap: 2px; padding: var(--sp-2); border-radius: var(--radius-sm);
             background: var(--color-surface-2); align-content: start; }
.ipam-diff__col b { font-size: var(--fs-xs); color: var(--color-text-muted); }
.ipam-diff__old { border-left: 2px solid var(--color-danger); }
.ipam-diff__new { border-left: 2px solid var(--color-success); }
@media (max-width: 720px) { .ipam-diff { grid-template-columns: 1fr; } }
/* Sloupec s výběrem řádku (hromadné akce) – úzký, na mobilu skrytý. */
@media (max-width: 720px) { .table--stack td.rowsel { display: none; } }


/* ---- IPAM: rozbalovací menu v liště modulu --------------------- */
/* Lišta má devět položek a na užších obrazovkách se lámala do dvou řádků.
   Žurnál, nálezy a import jsou činnosti „nad evidencí", ne pohledy na ni,
   takže se schovají pod jedno tlačítko. */
.ipam-nav__more { position: relative; display: inline-flex; }
/* Akce řádku (dnes „Načíst data") sedí vpravo. `margin-left: auto` funguje
   i po zalomení: na úzké obrazovce se `.ipam-nav` láme a akce zůstane na
   pravém okraji svého řádku, ne uprostřed. */
.ipam-nav__act { margin-left: auto; display: inline-flex; align-items: center; }
.ipam-nav__more .dropdown__menu { right: 0; left: auto; min-width: 13rem; }
.ipam-nav__more .dropdown__item { white-space: nowrap; }
.ipam-nav__more .dropdown__item.is-active {
  font-weight: var(--fw-semibold); color: var(--color-brand-text);
}

/* ---- IPAM: záložky stavů nad frontou nálezů ---------------------- */
/* Fronta ve výchozím stavu ukazuje jen otevřené. Bez viditelných počtů
   působí vyřízené nálezy jako ztracené. */
.ipam-tabs {
  display: flex; gap: var(--sp-1); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4) 0;
}
.ipam-tabs__item {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  color: var(--color-text-muted); text-decoration: none;
  border: 1px solid transparent; font-size: var(--fs-sm);
}
.ipam-tabs__item:hover { background: var(--color-surface-2); }
.ipam-tabs__item.is-active {
  color: var(--color-brand-text); border-color: var(--color-border);
  background: var(--color-brand-soft); font-weight: var(--fw-semibold);
}
.ipam-tabs__n {
  min-width: 1.5rem; text-align: center; padding: 0 var(--sp-1);
  border-radius: 999px; background: var(--color-surface-2);
  font-variant-numeric: tabular-nums; font-size: var(--fs-xs);
}
.ipam-tabs__item.is-active .ipam-tabs__n { background: var(--color-surface); }


/* Číselníky fakturace – zvýraznění řádku, který je právě otevřený ve formuláři
   (stejný vzor jako .rinv-group__row.is-self, jen pro tabulkový řádek). */

/* ── IPAM: kontextový pruh klientského režimu (oprava 2) ───────────────────
   Klient není filtr, ale REŽIM – pruh to musí dát najevo na první pohled,
   proto barevný podklad a levý pruh v barvě značky. Jen tokeny. */
.ipam-ctx {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-sm);
}
.ipam-ctx__icon { display: inline-flex; color: var(--color-brand-text); }
/* Jméno klienta je odkaz na jeho kartu – podtržítko až na hover, aby
   pruh nevypadal jako řádek odkazů. */
.ipam-ctx__name { font-weight: var(--fw-semibold); color: var(--color-text); text-decoration: none; }
.ipam-ctx__name:hover { text-decoration: underline; }
.ipam-ctx__mode { color: var(--color-text-muted); font-size: var(--fs-sm); }
/* Odsune akce doprava; na úzké obrazovce se zalomí a mezera zmizí. */
.ipam-ctx__spacer { flex: 1 1 auto; }
/* `.ipam-ctx__switch` a `.ipam-ctx__lbl` patřily k selectu přepnutí
   klienta – ten je od opravy 7 obyčejný odkaz. */
@media (max-width: 719px) {
  .ipam-ctx__spacer { flex-basis: 100%; height: 0; }
}

/* ── IPAM: rozbalovací „⋯ Další" v hlavičce obrazovky (oprava 3) ───────────
   Stejná mechanika jako `ipam-nav__more` – generický [data-dropdown] z app.js.
   Formuláře uvnitř nabídky nesmí rozbít řádkování položek, proto reset. */
.ipam-more { position: relative; display: inline-flex; }
/* Tlačítko „⋯": čtvercové, ať nevypadá jako useknutý text. Rámeček dědí
   z `.btn--secondary`, takže drží tokeny jako každé jiné tlačítko. */
.ipam-more__btn { width: var(--control-h); padding: 0; font-size: 1.15rem; line-height: 1; }
.ipam-more .dropdown__menu { right: 0; left: auto; }
.ipam-more form { margin: 0; display: block; }
/* Položka nabídky je někdy <button> (odeslání formuláře) místo <a> – ať
   vypadá stejně. */
button.dropdown__item {
  width: 100%; background: none; border: 0; font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer;
}

/* ---- IPAM: lišta hromadné akce nad adresami (§10.2, oprava 6) ---- */
/* Backend i překlady byly hotové od F2, chyběl formulář. Lišta stojí POD
   tabulkou, aby bylo vidět, nad čím se akce provede. */
.ipam-bulkbar {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
}
.ipam-bulkbar .field__label { margin: 0; align-self: center; }
.ipam-bulkbar .select { max-width: 200px; }
.ipam-bulkbar .field__hint { flex: 1 0 100%; margin: 0; }

/* ---- IPAM: co „první volná" přeskočila (§9.6, oprava 6) --------- */
/* Bez tohohle výpisu vypadá nabídnutá adresa jako náhoda. Je schovaný
   v <details>, aby panel nenarostl u subnetu s deseti rozsahy. */
.ipam-skip > summary {
  cursor: pointer; font-size: var(--fs-sm); color: var(--color-text-muted);
}
.ipam-skip__list {
  margin: var(--sp-2) 0 0; padding-left: var(--sp-4);
  font-size: var(--fs-sm); color: var(--color-text-muted);
}
.ipam-skip__list li { margin-bottom: 2px; }

/* ---- IPAM: diff nálezu uvnitř buňky tabulky (oprava 6) ---------- */
/* `/ipam/recon` býval feed, protože „diff se do buňky nevejde". Vejde se,
   když je v rozbalovacím <details> — a seznam zůstane tabulkou. */
.ipam-diff > summary { cursor: pointer; font-size: var(--fs-sm); }
.ipam-diff__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-2); }
@media (max-width: 720px) { .ipam-diff__cols { grid-template-columns: 1fr; } }

/* ---- IPAM: obrazovka nastavení modulu (oprava 8) ---------------- */
/* Karty nastavení mají hustší obsah než seznamy: formulář, nápovědu
   a řadu tlačítek. Bez většího odsazení splývaly sekce dohromady. */
.ipam-set__row {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: var(--sp-3) 0 var(--sp-4);
}
.ipam-set__row .field { margin-bottom: 0; }
/* Tlačítka sekce v JEDNÉ řadě (uložit · otestovat · rozcestník).
   Selektor zůstává v jmenném prostoru `.ipam-*`: `.card__body > form`
   by platil pro každou kartu v portálu. */
.ipam-set__row + .field__action,
.ipam-set__act {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
}
/* Hodnota, kterou uživatel jen vidí (chybí mu oprávnění ji měnit). */
.ipam-set__ro { background: var(--color-surface-2); }

/* Přiřazení nezařazené zprávy klientovi (/ipam/mikrotik, karta „Nezařazené
   zprávy"): našeptávač + tlačítko na jednom řádku. Rodič nesmí mít `overflow`
   — nabídka se rozbaluje absolutně pod polem a schovala by se za okraj. */
.ipam-mt-assign { display: flex; align-items: flex-start; gap: var(--sp-2); flex-wrap: wrap; }
.ipam-mt-assign .ipam-picker { flex: 1 1 220px; min-width: 170px; }
.ipam-mt-assign .btn { flex: none; }
/* Výběr routeru a zaškrtávátko „příště automaticky" se lámou pod našeptávač —
   v buňce tabulky na ně vedle sebe není místo. */
.ipam-mt-assign .select { flex: 1 1 160px; min-width: 140px; }
.ipam-mt-assign .check { flex: 1 1 100%; margin: 0; }
.ipam-mt-assign .ipam-rowact { flex: none; }

/* Akce jednoho řádku vedle sebe (fronta smíření: přijmout · zamítnout;
   nezařazená zpráva: přiřadit · odložit). Buňka je nechávala na proudu textu,
   takže se v úzkém sloupci zalomily pod sebe a řádek povyrostl na dvojnásobek.
   `nowrap` je tu ZÁMĚR: dvě odpovědi na jednu otázku patří na jeden řádek,
   a když se sloupec zúží, roluje tabulka (`.table-wrap`), ne řádek. */
.ipam-rowact {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-2); flex-wrap: nowrap;
}
.ipam-rowact .btn { flex: none; }
/* Ve složeném zobrazení (mobil) sedí akce vpravo vedle popisku buňky. */
@media (max-width: 639px) { .ipam-rowact { justify-content: flex-start; } }

/* Skupina „příště přiřazovat automaticky podle" — z jednoho zaškrtávátka jsou
   tři (příloha / odesílatel / předmět). `fieldset` kvůli společné legendě,
   ale bez rámečku prohlížeče: v buňce tabulky by kreslil druhý box uvnitř
   karty. */
.ipam-mt-learn { flex: 1 1 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.ipam-mt-learn__t { padding: 0; margin-bottom: var(--sp-1); font-size: var(--fs-xs); color: var(--color-text-muted); }
.ipam-mt-learn .check { margin: 0 0 var(--sp-1); }

/* Akce u pravidla přiřazení na kartě zařízení: úprava a zapnutí/vypnutí vedle
   sebe. Každá je vlastní formulář, proto flex a ne jen mezera. */
.ipam-mr-acts { display: flex; align-items: center; gap: var(--sp-1); }
.ipam-mr-acts form { display: inline-flex; }

/* Přeřazení řádku archivu na router (§R7.6): nabídka + potvrzení pod názvem
   zařízení. Vlastní řádek, aby se sloupec neroztahoval. */
.ipam-mt-dev { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1); }
.ipam-mt-dev .select { flex: 1 1 140px; min-width: 120px; }
.ipam-mt-dev .btn { flex: none; }

/* ═══ PRŮVODCE ZAVEDENÍM KLIENTA (§R8) ═══════════════════════════════════════
   V portálu žádný vícekrokový průvodce nebyl (m365_onboard.php krokovou
   strukturu nemá), takže tohle je první sada. Drží se tokenů z pp-design —
   žádná natvrdo psaná barva ani rozměr mimo proměnné. */

/* Krokový ukazatel. Vodorovný na šířku, na úzkém displeji se láme — číslo
   kroku zůstává vidět, popisek se schová, aby se lišta nerozpadla. */
.wz-steps { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none;
            margin: 0 0 var(--sp-4); padding: 0; }
.wz-steps__item { flex: 1 1 auto; min-width: 0; }
.wz-steps__link { display: flex; align-items: center; gap: var(--sp-2);
                  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
                  background: var(--color-surface-2); color: var(--color-text-muted);
                  text-decoration: none; font-size: var(--fs-sm); white-space: nowrap; }
a.wz-steps__link:hover { background: var(--color-brand-soft); color: var(--color-text); }
.wz-steps__n { display: inline-flex; align-items: center; justify-content: center;
               width: 22px; height: 22px; flex: none; border-radius: 50%;
               background: var(--color-border); color: var(--color-text);
               font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.wz-steps__l { overflow: hidden; text-overflow: ellipsis; }
.wz-steps__item.is-current .wz-steps__link { background: var(--color-brand-soft); color: var(--color-text); }
.wz-steps__item.is-current .wz-steps__n { background: var(--color-brand); color: #fff; }
.wz-steps__item.is-done .wz-steps__n { background: var(--color-success); color: #fff; }
.wz-steps__item.is-skipped .wz-steps__n { background: var(--color-warning); color: #fff; }
@media (max-width: 720px) { .wz-steps__l { display: none; } .wz-steps__item { flex: 0 0 auto; } }

/* Jedna věta, PROČ tu krok je (§R8.5). Stojí nad obsahem, ne v nápovědě —
   kdo ji přečte, ví, jestli může krok přeskočit. */
.wz-why { margin: 0 0 var(--sp-4); color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Rozbalovací nápověda POD polem, ne modal: modal přeruší práci, blok se dá
   nechat otevřený a číst při vyplňování. Nativní <details>, bez JS. */
.wz-help { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.wz-help > summary { display: inline-flex; align-items: center; gap: var(--sp-1);
                     cursor: pointer; color: var(--color-brand-text); list-style: none; }
.wz-help > summary::-webkit-details-marker { display: none; }
.wz-help > p { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3);
               border-left: 2px solid var(--color-border);
               color: var(--color-text-muted); }

.wz-form { display: flex; flex-direction: column; gap: var(--sp-4); }
/* `align-items: start` je tu kvůli poli s nápovědou: buňka s hintem je vyšší
   a bez toho by se ostatní vstupy zarovnaly na STŘED řádku, takže by jeden
   input „odskočil" nahoru nebo dolů proti sousedům (§N8/2). */
.wz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
           gap: var(--sp-3) var(--sp-4); align-items: start; }
/* Nápověda pod polem nesmí měnit výšku řádku pro sousedy — proto se počítá
   jako součást buňky, ne jako samostatný blok pod mřížkou. */
.wz-grid .field { min-width: 0; }
.wz-grid .field__hint { margin-top: var(--sp-1); }
.wz-inline { display: flex; align-items: flex-start; gap: var(--sp-2); }
.wz-inline .input { flex: 1 1 200px; }
.wz-inline .btn { flex: none; }

/* Řádek s akcemi kroku. `margin-bottom` je tu kvůli tomu, co často následuje:
   vysvětlující věta („Sítě se přijímají první, protože…") nebo další karta.
   Bez něj se text lepil na tlačítko a vypadal jako jeho popisek (§N8/4). */
.wz-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
              margin-top: var(--sp-4); margin-bottom: var(--sp-5); }
/* Poslední prvek v těle kroku už mezeru pod sebou nepotřebuje. */
.card__body > .wz-actions:last-child { margin-bottom: 0; }
.wz-list { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); color: var(--color-text); }
.wz-list li { margin-bottom: var(--sp-1); }
.wz-count { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Vysvětlující poznámka. Varianta `--warn` je pro věci, které uživatel MUSÍ
   zaznamenat (odložené adresy, překryv sítí) — ne pro chyby. */
.wz-note { display: flex; align-items: flex-start; gap: var(--sp-2);
           margin: 0 0 var(--sp-4); padding: var(--sp-3);
           border-radius: var(--radius-sm); background: var(--color-surface-2);
           font-size: var(--fs-sm); }
.wz-note--warn { background: var(--color-warning-soft); }
.wz-note svg { flex: none; margin-top: 2px; }

/* Seznam neúspěšných zdrojů v kroku 4 (§N4/V18): zdroj tučně, důvod za ním.
   Bez odrážek — jsou to dvě až tři položky uvnitř řádku definičního seznamu,
   ne samostatný výčet. */
.wz-fails { margin: 0; padding: 0; list-style: none;
            display: flex; flex-direction: column; gap: var(--sp-1); }
.wz-fails li { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wz-fails span { color: var(--color-text-muted); }

.wz-foot { display: flex; align-items: center; gap: var(--sp-2); }
.wz-foot__spacer { flex: 1 1 auto; }

/* Vstup do průvodce z prázdného stavu klienta – karta, kterou nejde přehlédnout. */
.wz-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }

/* ═══ „Co vyžaduje pozornost" – jeden seznam, ne mřížka záložek (§N4/29) ═══
   Položka odpovídá na tři otázky v jednom řádku: ikona (co), věta s číslem
   (kolik) a jedna primární akce (co s tím). Na úzké obrazovce se akce
   přesune pod text, aby se věta nelámala do dvou slov na řádek. */
.ipam-att { margin: 0; padding: 0; list-style: none;
            display: flex; flex-direction: column; gap: var(--sp-2); }
.ipam-att__item { display: flex; align-items: flex-start; gap: var(--sp-3);
                  padding: var(--sp-3); border-radius: var(--radius-sm);
                  background: var(--color-surface-2); }
.ipam-att__ico { flex: none; display: flex; margin-top: 1px;
                 color: var(--color-text-muted); }
.ipam-att__main { flex: 1 1 auto; min-width: 0; }
.ipam-att__what { margin: 0; }
.ipam-att__parts { margin: var(--sp-1) 0 0; font-size: var(--fs-sm);
                   color: var(--color-text-muted); }
.ipam-att__act { flex: none; }

@media (max-width: 640px) {
  .ipam-att__item { flex-wrap: wrap; }
  .ipam-att__act { margin-left: calc(18px + var(--sp-3)); }
}

/* ═══ Vysvětlení kontroly v řádku (§N4/30) ═══
   Táž komponenta jako nápověda v průvodci (`.wz-help`) — nativní <details>,
   žádný JavaScript. Ve výchozím stavu je sbalená: kdo kontrolu zná, čte dál
   seznam. „Jak to spravit" je odlišené barvou, ne dalším nadpisem. */
/* Nápověda patří ke KONKRÉTNÍ kontrole na řádku, ne k tlačítku „Spustit
   kontroly teď" nad tabulkou (§N7d/9.4d). Odsazení a svislá linka ji vizuálně
   přisazují k názvu kontroly nad ní. */
.ipam-chk__help { margin: var(--sp-1) 0 0 var(--sp-3); padding-left: var(--sp-2);
                  border-left: 2px solid var(--color-border);
                  font-size: var(--fs-sm); }
.ipam-chk__help > summary { display: inline-flex; align-items: center; gap: var(--sp-1);
                            cursor: pointer; color: var(--color-brand-text); list-style: none; }
.ipam-chk__help > summary::-webkit-details-marker { display: none; }
.ipam-chk__help > p { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3);
                      border-left: 2px solid var(--color-border);
                      color: var(--color-text-muted); }
.ipam-chk__help > p.ipam-chk__fix { border-left-color: var(--color-brand); }

/* Dvojice karet vedle sebe — prahy „výchozí pro všechny" × „tento klient"
   (§N5/40). Byly pod sebou se stejným nadpisem a četly se jako dvě identické
   karty. Na úzké obrazovce se skládají pod sebe; tam už je rozliší nadpisy. */
.ipam-set__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                  gap: var(--sp-4); align-items: start; }

/* Pravidla auto-accept (§N5/41): legenda se zarovnává na TEXT popisku, ne na
   okraj karty — jinak není poznat, která věta patří ke kterému zaškrtávátku.
   Odsazení = šířka políčka + jeho mezera, tedy `.checkrow` gap. */
.ipam-auto__rule { margin-bottom: var(--sp-3); }
.ipam-auto__rule:last-of-type { margin-bottom: var(--sp-4); }
.ipam-auto__rule .checkrow { padding-bottom: 0; }
.ipam-auto__hint { margin: 2px 0 0; padding-left: calc(13px + var(--sp-2)); }

/* Dvě samostatné akce v jedné buňce (vypnout × smazat). Bylo to inline
   `style="display:inline"`, což pravidlo 2 zakazuje. */
.ipam-inline-form { display: inline; }

/* Odložený průvodce (§N6/48): tichý řádek, ne karta s výzvou. Uživatel ho
   vědomě odložil — druhá nabídka po odmítnutí je otravování, chybějící cesta
   zpátky je ale ztráta rozdělané práce. */
.ipam-wz-deferred { display: flex; align-items: center; gap: var(--sp-2);
                    margin: 0 0 var(--sp-4); font-size: var(--fs-sm);
                    color: var(--color-text-muted); }

/* Stav zařazeného sběru (§N6/45): sběr od N6 běží v plánovači, ne v requestu.
   Bez tohohle řádku by uživatel klikl a viděl nezměněnou frontu. */
.ipam-disco-state { display: flex; align-items: center; gap: var(--sp-2);
                    margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3);
                    border-radius: var(--radius-sm); background: var(--color-surface-2);
                    font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Zařazený sběr, který nemá kdo vyzvednout (§N7a/X1). Na rozdíl od
   `.ipam-disco-state` to NENÍ průběh, ale porucha nasazení: fronta se plní
   a nikdo ji nevybírá. Proto výstražná barva a plná šířka, ne šedý řádek. */
.ipam-stuck { display: flex; align-items: flex-start; gap: var(--sp-3);
              margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
              border: 1px solid var(--color-danger); border-left-width: 3px;
              border-radius: var(--radius-sm); background: var(--color-danger-soft); }
.ipam-stuck__icon { color: var(--color-danger-text); flex: 0 0 auto; line-height: 1; }
.ipam-stuck__body { flex: 1 1 auto; min-width: 0; }
.ipam-stuck__body strong { display: block; color: var(--color-text); }
.ipam-stuck__body p { margin: var(--sp-1) 0 0; font-size: var(--fs-sm);
                      color: var(--color-text-muted); }
.ipam-stuck__ask { flex: 0 0 auto; align-self: center; font-size: var(--fs-sm);
                   color: var(--color-text-muted); }
@media (max-width: 640px) {
  .ipam-stuck { flex-wrap: wrap; }
}

/* ── UOL – Pokladna (uol_cash_*) ──────────────────────────────────────────
   Modul „Fakturace → UOL → Pokladna": KPI + tabulky drží společný design,
   navíc jen pár prvků – akce v pod-navigaci, částky se znaménkem, jednoduchý
   CSS sloupcový graf (bez JS knihovny) a dvousloupcový blok statistik. */
.subnav__link--action { margin-left: auto; color: var(--color-brand-text); }
.subnav__link--action + .subnav__link--action { margin-left: 0; }

.uolc-head-actions { display: inline-flex; gap: var(--sp-2); margin-left: auto; }

.uolc-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.uolc-amt.is-up   { color: var(--color-success-text); }
.uolc-amt.is-down { color: var(--color-danger-text); }

.uolc-range { display: inline-flex; align-items: center; gap: var(--sp-2); }
.uolc-range .input { width: auto; min-width: 140px; }
.uolc-range.is-hidden { display: none; }

.uolc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; }
@media (max-width: 980px) { .uolc-cols { grid-template-columns: 1fr; } }

/* Sloupcový graf: nad osou příjmy, pod osou výdaje; výška škálovaná v PHP. */
.uolc-chart { display: flex; align-items: stretch; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); }
.uolc-chart__col { display: flex; flex-direction: column; min-width: 34px; flex: 1 1 34px; }
.uolc-chart__up, .uolc-chart__down { display: flex; height: 62px; }
.uolc-chart__up { align-items: flex-end; }
.uolc-chart__down { align-items: flex-start; }
.uolc-chart__axis { height: 1px; background: var(--color-border-strong); }
.uolc-chart__bar { display: block; width: 100%; border-radius: 3px 3px 0 0; min-height: 1px; }
.uolc-chart__bar--in  { background: var(--color-success); }
.uolc-chart__bar--out { background: var(--color-danger); border-radius: 0 0 3px 3px; }
.uolc-chart__lbl { font-size: var(--fs-xs); color: var(--color-text-muted); text-align: center; margin-top: var(--sp-2); white-space: nowrap; }

.uolc-form .form-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
#uolc-items .input, #uolc-items .select { min-width: 0; }

/* Filtrační řádek pokladny: úzké selecty, aby se filtr i tlačítko „Filtrovat"
   vešly na jeden řádek (velikost stránky je v patičce tabulky). */
.filters--uolc .select { max-width: 150px; }
.filters--uolc .input--search { flex: 1 1 200px; min-width: 160px; }
.filters--uolc .uolc-range .input { min-width: 132px; }
.pager__size { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-4); }
.pager__size .select { height: var(--control-h-sm); font-size: var(--fs-sm); width: auto; }

/* Neúspěšně skončený sběr (§N7c/V4b). Tentýž řádek jako průběh, jen barvou
   říká, že se čekat nemá — požadavek se po třech pokusech vzdal. */
.ipam-disco-state.is-bad { background: var(--color-danger-soft); color: var(--color-text); }
.ipam-disco-state.is-bad svg { color: var(--color-danger-text); }

/* ── Odeslání faktury vydané e-mailem (modal + nastavení) ──────────────────
   Modal /invoicing/idoklad/issued (partials/idoklad_send_modal.php) a stránka
   Nastavení → Faktury vydané. Ikona obálky s třídou `is-sent` značí fakturu,
   která už jednou odešla — jen barevný signál, akci neblokuje. */
.ise-modal .modal__body { max-height: 70vh; overflow-y: auto; }

.ise-head {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  align-items: baseline; justify-content: space-between;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--color-border);
}
.ise-head__client { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.ise-head__name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

.ise-atts { display: grid; gap: var(--sp-1); }
.ise-att { font-size: var(--fs-sm); }

.ise-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ise-channel {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  font-size: var(--fs-sm);
}
.ise-channel .link { margin-left: auto; }

.btn.is-sent { color: var(--color-success-text); }

/* Tabulka s formulářovými řádky: buňky zarovnat NAHORU, jinak vyšší buňka
   (textarea + legenda pod ní) posune sousední inputy na střed. */
.table--vtop th, .table--vtop td { vertical-align: top; }

/* ── Barvy dokumentů (contact_branding: doc_*) ───────────────────────────── */
/* Výběr barvy: swatch v `.input-group` vlevo, hex vpravo. `.input-group > .input`
   plošně ruší pravý radius (počítá se se suffixem) – tady žádný suffix není,
   proto se textovému poli pravé rohy vracejí. */
.input--color {
  flex: none; width: 46px; padding: 3px; cursor: pointer;
  background: var(--color-surface);
  -webkit-appearance: none; appearance: none;
}
.input--color::-webkit-color-swatch-wrapper { padding: 0; }
.input--color::-webkit-color-swatch { border: 0; border-radius: 3px; }
.input--color::-moz-color-swatch { border: 0; border-radius: 3px; }
.input-group > .input--color { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group > .input--color + .input {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm);
}

/* Živý náhled hlavičky dokumentu. Barvy uvnitř pruhu jsou SCHVÁLNĚ pevné hexy
   (ne tokeny portálu): pruh reprodukuje PAPÍROVÝ dokument z partials/_document_css.php,
   který se tiskne stejně ve světlém i tmavém motivu. Značkové barvy přicházejí
   z PHP/JS jako --dp-navy a --dp-accent. Stavové barvy se sem nikdy nepromítají. */
.docprev { position: sticky; top: var(--sp-4); --dp-navy: #16233c; --dp-accent: #2e90e0; }
.docprev__band { background: var(--dp-navy); border-radius: 14px; padding: var(--sp-5); color: #fff; }
.docprev__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.docprev__logo { max-height: 28px; max-width: 160px; width: auto; object-fit: contain; }
.docprev__logo--none {
  font-size: var(--fs-xs); color: #8593ad;
  border: 1px dashed #4a5673; border-radius: var(--radius-sm); padding: 4px 8px;
}
.docprev__date { text-align: right; }
.docprev__datelbl {
  display: block; font-size: 9px; letter-spacing: .15em; text-transform: uppercase;
  font-weight: var(--fw-semibold); color: #8593ad;
}
.docprev__dateval { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: #dfe5ef; }
.docprev__eyebrow {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: var(--fw-semibold); color: var(--dp-accent);
}
.docprev__h1 { margin-top: var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: 1.2; color: #fff; }
.docprev__foot {
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--color-border);
  text-align: center; font-size: var(--fs-xs); color: var(--color-text-muted); min-height: 1.3em;
}
@media (max-width: 980px) { .docprev { position: static; } }

/* ── Katalog kontrol auditu (m365 audit catalog) ─────────────────────────── */
/* Sloupce se zaškrtávátky profilů: úzké, obsah na střed. */
.ac-profcol { width: 72px; text-align: center; }

/* Dvousloupcový překlad: vlevo čeština (read-only), vpravo cílový jazyk.
   Pod 900 px se sloupce skládají pod sebe, aby textarea zůstala čitelná. */
.ac-tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.ac-tr .field { margin-bottom: var(--sp-3); }
.ac-tr__src { background: var(--color-surface-2); color: var(--color-text-muted); }
@media (max-width: 900px) { .ac-tr { grid-template-columns: 1fr; } }

/* Pole s NEAKTUÁLNÍM překladem – vizuálně odlišené, ne jen odznakem
   (pp-design: význam se nikdy nenese jen barvou, proto je vedle i text). */
.ac-field--stale > .textarea { border-color: var(--color-warning); }
.ac-hint--stale { color: var(--color-warning-text); }

/* ── Audit tenantu: pod-nav, pracovní plocha, nálezy ─────────────────────── */


/* Zvýraznění aktuálního běhu v seznamu auditů. `.is-inactive` řeší opačný
   případ (zašedlý řádek), pro zvýraznění ekvivalent nebyl. */
.table tr.is-current-row td { background: var(--color-brand-soft); }

/* Řádek filtrů pracovní plochy kontrol – čtyři výběry + hledání se musí vejít
   na JEDEN řádek. Bez omezené šířky by `width:auto` roztáhlo výběr podle
   nejdelší kapitoly a řádek by se zalomil; na úzkém displeji se místo zalomení
   vodorovně roluje (stejné chování jako .filters--exp a .filters--ipam). */
.filters--audit { flex-wrap: nowrap; overflow-x: auto; }
.filters--audit .select { flex: 0 0 auto; max-width: 168px; }
.filters--audit .input--search { flex: 1 1 180px; min-width: 150px; }
.filters--audit .btn { flex: 0 0 auto; white-space: nowrap; }

/* Smazání auditů klienta: jen tlačítko pod seznamem, zarovnané doprava.
   Vlastní karta s nadpisem tuhle výjimečnou akci stavěla naroveň sekcím
   obrazovky - vysvětlení i varování patří do potvrzovacího modálu. */
.au-purge { display: flex; justify-content: flex-end; margin-top: var(--sp-3); }

/* Rozbalovací řádek kontroly. Stojí na nativním <details>, takže stačí schovat
   výchozí trojúhelník a dát summary chování řádku. */
.ai-row > summary { list-style: none; cursor: pointer; }
.ai-row > summary::-webkit-details-marker { display: none; }
.ai-row__sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ai-row__title { font-weight: var(--fw-medium); }
.ai-row[open] > .ai-row__sum { margin-bottom: var(--sp-3); }

/* Tři karty rozbalené kontroly. `.card` zůstává, tohle jen řeší, že karta je
   tady <details> (summary musí vypadat jako hlavička karty). */
.ai-cards { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0; }
.ai-card > summary { list-style: none; cursor: pointer; }
.ai-card > summary::-webkit-details-marker { display: none; }
.ai-card > summary.card__head::after {
  content: '▾'; margin-left: auto; color: var(--color-text-subtle); font-size: var(--fs-xs);
}
.ai-card[open] > summary.card__head::after { content: '▴'; }
.ai-card .field__label { margin-top: var(--sp-3); }
.ai-card .field__label:first-child { margin-top: 0; }

/* Tři fáze nálezů vedle sebe. `.kpis` je mřížka dlaždic s pevnou výškou,
   tohle jsou sloupce proměnné délky, na které se dá pustit tažený nález. */
.af-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; margin-bottom: var(--sp-5); }
@media (max-width: 980px) { .af-board { grid-template-columns: 1fr; } }
.af-col__body { display: grid; gap: var(--sp-3); min-height: 120px; }
.af-col.is-over { outline: 2px dashed var(--color-brand); outline-offset: -4px; }

/* Karta jednoho nálezu ve sloupci fáze. */
.af-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--sp-3); background: var(--color-surface);
}
.af-card.is-dragging { opacity: .5; }
.af-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.af-card__title { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.af-card__act { margin-top: var(--sp-2); flex-wrap: wrap; }
.card__head--wrap { flex-wrap: wrap; }
.card__head--wrap .card__title { min-width: 0; }
.card__actions--wrap { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.af-col, .af-card { min-width: 0; }
.af-card__title, .af-card__head { overflow-wrap: anywhere; }

/* ---- Vydání auditního dokumentu (/m365/audit/publish) ------------------- */
/* Obrácený poměr `grid2`: nastavení je krátký formulář, náhled dokumentu
   potřebuje šířku. Modifikátor existující komponenty, ne nová komponenta. */
.grid2--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 980px) { .grid2--rev { grid-template-columns: 1fr; } }

/* Řádek s uložením na konci karty. Oddělovací čára z něj dělá patičku karty -
   bez ní tlačítko splývá s poslední nápovědou nad sebou a vypadá, že k ní
   patří. */
.m365-saverow {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
}

/* Pravý sloupec obrazovky vydání: náhled dokumentu a pod ním vydání.
   `min-width: 0` proto, že výchozí `auto` u položky mřížky nedovolí sloupci
   zúžit se pod šířku obsahu - široká tabulka uvnitř by roztáhla celou mřížku. */
.m365-pubcol { min-width: 0; }

/* Nabídka stažení v hlavičce karty náhledu.
   Staví na generickém dropdownu ([data-dropdown] z app.js), mění jen kotvu:
   tlačítko sedí u PRAVÉHO okraje karty, takže výchozí `left: 0` by nabídku
   vytáhlo za okraj stránky. Názvy formátů se nelámou - jsou to jednoslovné
   popisky a zalomený „Soupis prostředí" by v nabídce vypadal jako dvě
   položky. */
.m365-dl .dropdown__menu { right: 0; left: auto; min-width: 13rem; }
.m365-dl .dropdown__item { white-space: nowrap; }

/* Rám živého náhledu. Dokument má vlastní `<html>` a vlastní styl, takže se
   vkládá do iframe - jinak by se jeho CSS propsalo do stránky portálu.
   Poměr stran odpovídá A4 (1 : 1,414), aby náhled ukazoval skutečnou stranu. */
.m365-docframe {
  display: block; width: 100%; aspect-ratio: 1 / 1.414; min-height: 420px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: #fff;
}

/* ---- Podmínky použití: dlouhý právní text (/terms/accept) --------------- */
/* Text je dlouhý a musí jít v klidu přečíst, proto vlastní typografie:
   užší sloupec (kolem 70 znaků na řádek), větší řádkování a viditelné
   nadpisy. Bez toho splyne v jeden blok a nikdo ho nedočte.
   Značky jsou ty, které vrací App\Support\Markdown. */
.terms-doc { max-width: 68ch; font-size: var(--fs-sm); line-height: 1.7; color: var(--color-text); }
.terms-doc h4 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.terms-doc h5 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.terms-doc h4:first-child { margin-top: 0; }
.terms-doc p { margin: 0 0 var(--sp-3); }
.terms-doc ul, .terms-doc ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.terms-doc li { margin-bottom: var(--sp-1); }
.terms-doc code { font-size: .92em; background: var(--color-surface-2, rgba(0,0,0,.05)); padding: 1px 4px; border-radius: var(--radius-sm, 4px); }
.terms-doc hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--sp-5) 0; }
/* Citace nese upozornění „text k právní kontrole" - musí být vidět na první pohled. */
.terms-doc blockquote {
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--color-brand); background: var(--color-brand-soft);
  border-radius: var(--radius-sm, 4px);
}
.terms-doc table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); font-size: var(--fs-xs); }
.terms-doc th, .terms-doc td { padding: var(--sp-2); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.terms-doc th { font-weight: var(--fw-semibold); color: var(--color-text-muted); }

/* ── Veřejné API v1 – správa klíčů (pages/api_keys.php, skill pp-api) ─────── */
.apik-meta { font-size: var(--fs-xs); margin-top: 2px; }
.apik-scopes { max-width: 260px; }
.apik-scopes .chip { margin: 1px 2px 1px 0; font-family: var(--font-mono); }
.apik-ip { max-width: 220px; word-break: break-all; font-size: var(--fs-xs); }
.table tr.is-muted td { color: var(--color-text-muted); }
.apik-scopegroup { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); display: grid; gap: var(--sp-1); }
.apik-scopegroup__t { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.apik-scopegroup .modal__check.is-disabled { opacity: .5; cursor: not-allowed; }
.apik-sub { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-2) var(--sp-5); }
.apik-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 640px) { .apik-row2 { grid-template-columns: 1fr; } }

/* Kdo a kdy odebral nouzový účet (evidence break-glass). Doplněk pod jménem
   toho, kdo účet označil - musí být na první pohled druhořadý, ale čitelný. */
.bg-removed { margin-top: 2px; font-size: 11px; opacity: .85; }

/* ── Veřejné API v1 – Provoz a Log (pages/api_usage.php, api_logs.php) ───── */
.apiu-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
@media (max-width: 900px) { .apiu-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apiu-tile__v { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
.apiu-tile__s { font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.apiu-tile__l { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.apiu-chart { width: 100%; height: 220px; display: block; }
.apiu-chart__grid { stroke: var(--color-border); stroke-width: 1; }
.apiu-chart__ylab, .apiu-chart__xlab { font-size: 10px; fill: var(--color-text-muted); }
.apiu-chart__seg--ok { fill: var(--color-brand-text); }
.apiu-chart__seg--err { fill: var(--color-danger-text); }
.apiu-legend { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--color-text-muted); }
.apiu-legend__sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.apiu-legend__sw--ok { background: var(--color-brand); }
.apiu-legend__sw--err { background: var(--color-danger); }
.apiu-bar { height: 6px; background: var(--color-surface-2); border-radius: 3px; overflow: hidden; }
.apiu-bar__fill { height: 100%; background: var(--color-brand); }
.apiu-bar__fill.is-warn { background: var(--color-warning); }
.apiu-bar__fill.is-danger { background: var(--color-danger); }
.apil-kv th { text-align: left; color: var(--color-text-muted); font-weight: var(--fw-medium); }

/* ── Veřejné API v1 – tlačítka exportu reference v nápovědě (help_module.php) ── */
.help-dl { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-4); }

/* ── Faktury vydané (modul /invoicing/issued, F1) ──────────────────────────
   Vlastní fakturační modul portálu. Skill pp-invoicing: částky vždy
   `tabular-nums` a `nowrap` (číslice pod sebou musí lícovat - seznam se čte
   po sloupci, ne po řádku), stornovaný doklad má přeškrtnuté číslo, po
   splatnosti je barevné datum, a ve sloupci Stav je jediný hlavní štítek.
   Vše přes tokeny - žádný hex, žádné pevné rozměry navíc. */
.inv-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Přednastavené pohledy nad filtrem (Vše · Nezaplacené · …) - rychlé odkazy,
   ne další select. Vlastní pruh, aby nelepily na řádek filtrů. */
.inv-views-wrap { padding-bottom: var(--sp-3); }
.inv-views { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.inv-views__link {
  display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-text-muted); text-decoration: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.inv-views__link:hover { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border-strong); }
.inv-views__link:active { background: var(--color-border); }
.inv-views__link.is-active { background: var(--color-brand-soft); color: var(--color-brand-text); border-color: transparent; }

/* Číslo dokladu; storno se škrtá i v tabulce, aby šlo poznat bez čtení stavu. */
.inv-docno { font-variant-numeric: tabular-nums; }
/* Číslo dokladu je proklik na detail - hlavní cesta z řádku seznamu. */
.inv-docno__link { color: var(--color-brand-text); text-decoration: none; font-weight: var(--fw-medium); }
.inv-docno__link:hover { text-decoration: underline; }
.inv-docno.is-struck { text-decoration: line-through; color: var(--color-text-subtle); }
.table tbody tr.is-cancelled td { color: var(--color-text-subtle); }
.is-overdue { color: var(--color-danger-text); }

/* Odeslání zákazníkovi a předání účetní NEJSOU stavy - jsou to ikony za
   hlavním štítkem (jinak by běžný doklad měl čtyři štítky vedle sebe). */
.inv-ico { display: inline-flex; vertical-align: middle; margin-left: var(--sp-1); color: var(--color-text-muted); }

/* Odstranění aktivního filtru ze štítku. */
.chip__x { text-decoration: none; color: inherit; font-size: var(--fs-sm); line-height: 1; }
.chip__x:hover { color: var(--color-danger-text); }

/* Karta „Číselné řady" a „Pověření" v nastavení modulu. Řádky nesou formulářová
   pole, proto `vertical-align: top` - jinak vyšší buňka (náhled pod maskou)
   posune sousední inputy na střed. */
.inv-series td, .inv-deleg td { vertical-align: top; }
.inv-series .input, .inv-series .select { min-width: 0; }
.inv-mask-preview { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--sp-1); font-variant-numeric: tabular-nums; }
.inv-mask-preview.is-error { color: var(--color-danger-text); }
.inv-mask-hint { font-size: var(--fs-xs); color: var(--color-text-subtle); }

/* ── Faktury vydané: editor dokladu (F2) ───────────────────────────────────
   Dvousloupcová kostra s LEPIVÝM souhrnem (skill pp-invoicing): uživatel musí
   mít částku „K úhradě" a tlačítko Vystavit na očích pořád, jinak scrolluje
   sem a tam a kontroluje, jestli sedí celková cena. Pod 1100 px se souhrn
   přesune pod položky. Vše přes tokeny. */
.inv-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); align-items: start; }
.inv-editor__main { min-width: 0; }
.inv-editor__aside { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
@media (max-width: 1100px) {
  .inv-editor { grid-template-columns: 1fr; }
  .inv-editor__aside { position: static; }
}

.inv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .inv-cols { grid-template-columns: 1fr; } }
.inv-card--gap { margin-top: var(--sp-5); }

/* ── Editor dokladu: jeden sloupec ─────────────────────────────────────────
   Nahoře hlavička dokladu (Odběratel · Doklad · Platba vedle sebe), pod ní
   položky přes celou šířku, rekapitulace pod nimi vpravo a lepivý pruh akcí
   dole.

   Dřív tu byla kostra `.inv-editor` s lepivou kartou souhrnu vpravo. Důvod
   byl správný - částku „K úhradě" a tlačítko Vystavit musí mít uživatel pořád
   na očích - jenže karta si brala 320 px přesně té části obrazovky, kde se
   pracuje nejvíc, a mřížka položek se na notebooku vodorovně posouvala.
   Souhrn je teď tam, kde ho má faktura (pod položkami), a na očích ho drží
   pruh u dolního okraje okna. `.inv-editor` zůstává - používá ji formulář
   opakovaných faktur. */
.inv-doc { min-width: 0; }

.inv-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--sp-5); align-items: start; }
@media (max-width: 1200px) { .inv-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .inv-head { grid-template-columns: 1fr; } }

/* Hlavička dokladu ve DVOU kartách místo tří. Vlevo „komu a co“ (odběratel,
   typ, řada, čísla, předmět), vpravo „kdy a jak se platí“ (tři data, měna,
   způsob úhrady, účet, symboly - splatnost tak stojí u platebních údajů jako
   na vytištěné faktuře). Obě karty jsou vždy stejně vysoké (karta je flex
   sloupec a tělo doplní zbytek), takže pod kratší kartou nevzniká díra jako
   dřív pod kartou Odběratel. Pod 900 px jedna pod druhou, každá své výšky.

   Uvnitř karty `.inv-g6`: šest sloupců, aby šly třetiny i poloviny v jedné
   mřížce. Pole se zarovnávají ke SPODNÍ hraně - delší popisek („Datum
   zdanitelného plnění", „Konstantní symbol") se zalomí na dva řádky a bez
   toho by jeho pole kleslo níž než sousední (stejný důvod jako u
   `.inv-frow--sym`). Nápověda k jednomu poli proto jde jako samostatný řádek
   `.inv-g6__hint` pod řádek, ne pod pole. */
.inv-head--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.inv-head--2 > .card { display: flex; flex-direction: column; }
.inv-head--2 > .card > .card__body { flex: 1 1 auto; }
@media (max-width: 900px) { .inv-head--2 { grid-template-columns: 1fr; } }
.inv-g6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 var(--sp-3); align-items: end; }
.inv-g6 > .field { grid-column: span 2; }
.inv-g6 > .field--half { grid-column: span 3; }
.inv-g6 > .field--two-thirds { grid-column: span 4; }
.inv-g6 > .field--full { grid-column: 1 / -1; }
.inv-g6 > .formgrid__sect { grid-column: 1 / -1; margin: var(--sp-2) 0 var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--color-border); }
.inv-g6 > .formgrid__sect:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.inv-g6__hint { grid-column: 1 / -1; margin: calc(var(--sp-2) * -1) 0 var(--sp-4); }
/* Pole s datem má v Chromu výchozí šířku kolem 158 px, i když samotné datum
   s ikonou kalendáře potřebuje jen kolem 120 px. Bez tohoto by třetina v kartě
   široké 455 px (obrazovka 1280 px) přetekla přes okraj karty. */
.inv-g6 > .field { min-width: 0; }
.inv-g6 > .field > .input,
.inv-g6 > .field > .select { min-width: 0; width: 100%; }
/* Kartička vybraného odběratele a tip k režimu DPH nejsou `.field`, ale
   v mřížce patří přes celou šířku (bez toho by zabraly jediný sloupec). */
.inv-g6 > .inv-custcard { grid-column: 1 / -1; margin-bottom: var(--sp-4); }
.inv-g6 > .inv-note { grid-column: 1 / -1; margin: 0 0 var(--sp-4); }
/* Kurz (jen cizí měna) se vkládá mezi Měnu a Způsob úhrady: s ním má řádek
   tři třetiny, bez něj zabere Způsob úhrady dvě třetiny. Řídí to `hidden`
   na `[data-rate-field]`, které už přepíná `toggleRate()` v issued-editor.js -
   CSS jen čte týž stav, takže se rozložení nerozejde s tím, co vykreslil
   server. Prohlížeč bez `:has()` (Firefox < 121) Způsob úhrady jen zalomí na
   další řádek; nápovědy ke kurzu se schovávají spolu s polem. */
@media (min-width: 561px) {
  .inv-g6:has(> [data-rate-field]:not([hidden])) > .inv-g6__pm { grid-column: span 2; }
}
.inv-g6:has(> [data-rate-field][hidden]) > .inv-g6__ratehints { display: none; }
/* Úzká karta (dvě karty vedle sebe a rozbalené boční menu - obrazovka do
   zhruba 1450 px): datum s ikonou kalendáře potřebuje asi 140 px, třetina
   by byla užší a rok by se ořízl (ověřeno: na 1280 px „03.10.202“). Třetiny
   proto jen v kartě od 500 px. Rozhoduje šířka KARTY, ne okna (container
   query), protože ji mění i sbalení bočního menu.
   Pole se pak skládají po dvou (Měna a Způsob úhrady napůl); s polem Kurz
   jde Způsob úhrady na celý řádek pod Měnu a Kurz. */
.inv-head--2 > .card { container: invcard / inline-size; }
@container invcard (max-width: 500px) {
  .inv-g6 > .field:not(.field--full) { grid-column: span 3; }
  .inv-g6:has(> [data-rate-field]:not([hidden])) > .inv-g6__pm { grid-column: 1 / -1; }
}
/* Telefon: každé pole přes celý řádek. Až za úzkou kartou a se zesílenou
   specificitou, jinak by ho pravidlo úzké karty přebilo. */
@media (max-width: 560px) {
  .inv-g6 > .field:not(.field--full),
  .inv-g6 > .field--half,
  .inv-g6 > .field--two-thirds { grid-column: 1 / -1; }
}

/* Rekapitulace pod položkami - vpravo, jako na vytištěné faktuře: z čeho
   částka vznikla, je vidět hned nad ní. */
.inv-total { display: flex; justify-content: flex-end;
             margin-top: var(--sp-4); padding-top: var(--sp-4);
             border-top: 1px solid var(--color-border); }
.inv-total__box { width: min(360px, 100%); }

/* Lepivý pruh akcí u dolního okraje okna. */
.inv-bar { position: sticky; bottom: 0; z-index: var(--z-sticky, 100);
           display: flex; align-items: center; justify-content: space-between;
           flex-wrap: wrap; gap: var(--sp-3);
           margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4);
           background: var(--color-surface);
           border: 1px solid var(--color-border); border-radius: var(--radius-md);
           box-shadow: var(--shadow-lg); }
.inv-bar__sum { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.inv-bar__lbl { font-size: var(--fs-sm); color: var(--color-text-muted); }
.inv-bar__amount { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.inv-bar__acts { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 639px) {
  .inv-bar { flex-direction: column; align-items: stretch; }
  .inv-bar__sum { justify-content: space-between; }
  .inv-bar__acts > .btn { flex: 1 1 auto; justify-content: center; }
}

.inv-frow { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.inv-frow > .field { flex: 1 1 140px; }
.inv-frow__zip { flex: 0 0 110px; }
.inv-frow__cur { flex: 0 0 120px; }
/* Tři symboly platby na jednom řádku: stejný díl místa, ne pevné šířky -
   ty se v úzké kartě nevešly a specifický symbol spadl pod ostatní. */
.inv-frow--sym > .field { flex: 1 1 0; min-width: 0; }
/* Delší popisek („Konstantní symbol") se v úzkém sloupci zalomí na dva řádky
   a bez tohohle by jeho pole kleslo o řádek níž než sousední. Zarovnáním ke
   spodní hraně stojí všechna tři pole v jedné lince v každém jazyce. */
.inv-frow--sym { align-items: flex-end; }
/* Výběr měn v číselníku - kódy jsou krátké, patří do mřížky, ne pod sebe. */
.cl-curgrid { display: grid; gap: var(--sp-2) var(--sp-4);
              grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.cl-curgrid .inv-check { margin-top: 0; }

/* Nahrání přílohy dokladu - formulář s popisky, ne řádek ovládacích prvků. */
.inv-attadd { margin-top: var(--sp-4); border-top: 1px solid var(--color-border); padding-top: var(--sp-4); }
.inv-attadd .card__foot { padding-inline: 0; }

/* Pole s tlačítkem hned vedle (vyhledání odběratele + „+", IČ + rejstřík). */
.inv-pick { display: flex; gap: var(--sp-2); align-items: stretch; }
.inv-pick > .input { flex: 1 1 auto; min-width: 0; }
.inv-pick > .btn { flex: 0 0 auto; }

/* Vybraný odběratel: kartička s textem, ne formulář. Rozepsané pole vedle
   vybrané firmy svádí do něj psát dál; údaje na dokladu se mění jedině přes
   sbalenou sekci pod ní. */
.inv-custcard { border: 1px solid var(--color-border); border-radius: var(--radius-sm);
                padding: var(--sp-3); background: var(--color-surface-2); }
.inv-custcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.inv-custcard__line { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.inv-custcard__line:empty { display: none; }

/* Historie dokladu: čas - co - kdo, pod tím případný důvod. Seznam, ne
   tabulka - třetí sloupec (kdo) bývá prázdný u akcí zvenčí a tabulka by
   z toho udělala díru. */
.inv-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

/* Víc upozornění v jednom rámečku - odrážky, ne jeden slepený odstavec. */
.inv-warn__list { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; }

/* ── Průvodce nastavením fakturace (/invoicing/wizard) ──────────────────────
   Obrazovka je karta nastavení jako každá jiná; vlastní je jen kroková
   navigace a patička, kde „Přeskočit" stojí proti postupu vpřed - odchod
   z průvodce nesmí vypadat jako další krok. */
.wiz-issuer { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.wiz-issuer .field__label { margin: 0; }
.wiz-issuer .select { max-width: 22rem; }
.wiz-steps__n { display: inline-flex; align-items: center; justify-content: center;
                width: 1.35rem; height: 1.35rem; margin-right: var(--sp-1);
                border-radius: 50%; background: var(--color-surface-2);
                font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.subnav__link.is-active .wiz-steps__n { background: var(--color-brand); color: var(--color-text-on-brand); }
.wiz-foot { justify-content: space-between; }
.wiz-foot__next { display: flex; gap: var(--sp-2); align-items: center; }
.wiz-todo { margin: var(--sp-3) 0 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
/* Krok 2: co firma už má (účty) a co si k tomu může přidat. Hotový stav je
   sdělení, ne formulář - prázdné pole vedle existujícího účtu vypadá, jako by
   se muselo vyplnit. */
.wiz-done { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2);
            color: var(--color-success-text); font-size: var(--fs-sm); }
.wiz-noperm { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-3) 0 0;
              color: var(--color-text-muted); font-size: var(--fs-sm); }
.wiz-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-1); }
.wiz-list li { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-sm); }
.wiz-list__cur { color: var(--color-text-muted); font-size: var(--fs-xs); }
.wiz-list__note { color: var(--color-text-subtle); font-size: var(--fs-xs); }
.wiz-add { margin-top: var(--sp-2); }
.wiz-add__sum { cursor: pointer; list-style: none; font-size: var(--fs-sm);
                color: var(--color-brand-text); padding: var(--sp-1) 0; }
.wiz-add__sum::-webkit-details-marker { display: none; }
.wiz-add__sum::before { content: "▸ "; }
.wiz-add[open] > .wiz-add__sum::before { content: "▾ "; }
.wiz-add__body { padding-top: var(--sp-2); }
.wiz-add__foot { margin-top: var(--sp-3); }
/* Krok 3: tři ROVNOCENNÉ volby pod sebou. Stejný rámeček i stejná váha
   nadpisu - žádná z nich není výjimka schovaná za tou druhou (§2.3 zadání). */
.wiz-opt { border: 1px solid var(--color-border); border-radius: var(--radius-sm);
           padding: var(--sp-4); margin-top: var(--sp-3); }
.wiz-opt__h { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.wiz-opt__hint { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); color: var(--color-text-muted); }
.wiz-opt__none { margin: 0; font-size: var(--fs-xs); color: var(--color-text-subtle); }
.wiz-opt__form { display: grid; gap: var(--sp-2); justify-items: start; }
.wiz-opt__form + .wiz-opt__form { margin-top: var(--sp-3); padding-top: var(--sp-3);
                                  border-top: 1px solid var(--color-border); }

/* Mandatorní banner (zadání wizardu §4): text vlevo, akce vpravo. Staví na
   portálovém `.banner` - nový vzhled jen pro tuhle jednu věc by portál
   nepotřeboval. */
.wiz-banner { flex-wrap: wrap; }
.wiz-banner__text { flex: 1 1 20rem; }
.inv-hist__item { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: var(--sp-2) var(--sp-3);
                  align-items: baseline; font-size: var(--fs-sm);
                  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--color-border); }
.inv-hist__item:last-child { border-bottom: none; padding-bottom: 0; }
.inv-hist__when { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.inv-hist__who { color: var(--color-text-muted); font-size: var(--fs-xs); }
.inv-hist__note { grid-column: 2 / -1; margin: 2px 0 0; font-size: var(--fs-xs);
                  color: var(--color-text-muted); }
@media (max-width: 640px) {
  .inv-hist__item { grid-template-columns: 1fr; }
  .inv-hist__note { grid-column: 1; }
}

.inv-btnrow { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.inv-btnrow--items { margin: var(--sp-3) 0 0; }
.inv-ro { margin: 0; font-size: var(--fs-sm); color: var(--color-text); }
.inv-check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs);
             color: var(--color-text-muted); margin-top: var(--sp-1); }

/* Upozornění, ne chyba: účet v jiné měně než doklad je legitimní stav, jen
   o něm má vystavovatel vědět dřív, než doklad odejde. Červená hláška by
   svědčila o chybě, kterou musí opravit - a to není pravda. */
.inv-warn { display: flex; gap: var(--sp-2); align-items: flex-start;
            margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
            border-radius: var(--radius-sm);
            background: var(--color-warning-soft); color: var(--color-text);
            font-size: var(--fs-xs); }
.inv-warn svg { flex: none; color: var(--color-warning-text); }

/* Informační řádek s návrhem režimu DPH - viditelný, ne tichý (§5.3). */
.inv-note { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-4);
            padding: var(--sp-3); border-radius: var(--radius-sm);
            background: var(--color-info-soft); color: var(--color-text);
            font-size: var(--fs-sm); }

/* Našeptávač odběratele. */
/* Našeptávač odběratele. Panel visí na ŘÁDKU s polem (`.inv-pick`), ne na celém
   bloku `.field` - ten je vysoký o popisek a nápovědu a panel pak vyskočil
   o kus níž, mimo pole, ke kterému patří. */
.inv-ac { position: relative; }
.inv-ac .inv-pick { position: relative; }
.inv-ac__panel { position: absolute; z-index: var(--z-dropdown, 30); left: 0; right: 0; top: calc(100% + 2px);
                 background: var(--color-surface); border: 1px solid var(--color-border);
                 border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 280px;
                 overflow-y: auto; }
.inv-ac__item { display: block; width: 100%; text-align: left; border: 0; background: transparent;
                padding: var(--sp-2) var(--sp-3); cursor: pointer; font-size: var(--fs-sm);
                color: var(--color-text); }
.inv-ac__item:hover, .inv-ac__item:focus { background: var(--color-brand-soft); color: var(--color-brand-text); }
.inv-ac__item .sub { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Položkový grid: hustý, s inputy uvnitř buněk. */
/* `table-layout: fixed` + šířky v PROCENTECH. Původně tu byly pevné šířky
   v rem (6,5 + 5 + 8 + 7 + 8,5 + 6 = 41 rem ≈ 656 px), které se do tabulky
   nevešly - `table-layout: fixed` je nezmenšuje a mřížka dostala vodorovný
   posuvník. Procenta se počítají ze šířky tabulky, takže součet nikdy
   nepřeteče; jen sloupec akcí zůstává v rem, protože v něm jsou tlačítka
   pevné velikosti. (Místa má mřížka od přestavby editoru víc - lepivý souhrn
   jí už nebere 320 px - ale na úzkém okně to platí dál.) */
.inv-items { table-layout: fixed; }
.inv-items td, .inv-items th { vertical-align: top; padding: var(--sp-2) var(--sp-2); }
.inv-items .input, .inv-items .select { height: var(--control-h-sm); width: 100%; min-width: 0; }
/* Šířky: co nejvíc na označení dodávky, zbytku jen tolik, kolik potřebuje.
   Množství, jednotka i sazba DPH mají krátký obsah a široký sloupec z nich
   dělal prázdné místo - u čísel zarovnaných doprava to vypadalo jako velké
   odsazení sloupců DPH a Celkem. */
.inv-items__name { width: auto; }
.inv-items__qty { width: 7%; }
.inv-items__unit { width: 5.5%; }
.inv-items__price { width: 11%; }
.inv-items__vat { width: 9.5%; }
.inv-items__total { width: 12%; }
/* Čtyři ikony u řádku (popisek · sleva · duplikovat · smazat). Šířka sloupce
   musí odpovídat obsahu - `table-layout: fixed` buňku nerozšíří, jen nechá
   obsah přetéct a mřížka dostane vodorovný posuvník. Proto jsou i tlačítka
   čtvercová: bez toho má každé jinou šířku podle glyfu a součet se neuhlídá. */
/* Zarovnání doprava musí přebít `.table td { text-align: left }`, jinak se
   ikony drží u levého kraje buňky. U řádku s položkou to nebylo poznat (tři
   ikony buňku skoro vyplnily), ale pod-řádek slevy má jediné tlačítko a to
   pak stálo o půl sloupce vlevo proti ikonám nad ním. */
.inv-items td.inv-items__acts, .inv-items th.inv-items__acts { width: 8.5rem; text-align: right; }
.inv-rowacts .btn--xs, .inv-items__acts .btn--xs { width: 26px; padding: 0; justify-content: center; }
/* Číselné buňky nesmí rozpínat tabulku dlouhou částkou - radši zalomí. */
.inv-items td.num { overflow-wrap: anywhere; }
/* Nic v mřížce nesmí buňku rozšířit. `table-layout: fixed` sice udrží šířku
   tabulky, ale přetečený obsah buňky rozsvítí posuvník na `.table-wrap`. */
.inv-items td > *, .inv-items th > * { max-width: 100%; }
/* Pod 640 px se mřížka skládá pod sebe (`table--stack`); do té doby zůstává
   `fixed`, aby se sloupce nerozjely podle náhodné délky názvu položky. */
@media (max-width: 639px) {
  .inv-items { table-layout: auto; }
  .inv-items__acts { width: auto; }
}
.inv-items__pdp { font-size: var(--fs-xs); color: var(--color-text-muted); text-align: right; margin-top: 2px; }
.inv-rowacts { display: inline-flex; gap: 2px; }
.inv-items-body { padding-top: var(--sp-3); }

/* Pod-řádek slevy: odsazený, tlumený, bez vlastní sazby DPH (dědí od rodiče). */
/* Pod-řádek slevy. Šipka a pole na JEDNOM řádku, legenda pod nimi; buňky se
   zarovnávají na střed, aby ovládání vpravo lícovalo s polem vlevo.
   Dřív to byl `inline-block` s `width: calc(100% - 1.5rem)` plus okraj u šipky,
   takže součet přesáhl šířku buňky a pole se zalomilo pod šipku - řádek pak měl
   tři patra vlevo a jedno vpravo. */
.inv-subrow > td { background: var(--color-surface-2); vertical-align: top; }
.inv-subrow__main { display: flex; align-items: center; gap: var(--sp-2); }
.inv-subrow__tag { flex: none; color: var(--color-text-subtle); }
.inv-subrow__label { flex: 1 1 auto; min-width: 0; }
.inv-subrow .sub { display: block; margin-top: 2px; margin-left: calc(1rem + var(--sp-2));
                   font-size: var(--fs-xs); color: var(--color-text-muted); }
/* Stepper slevy sedí ve sloučené buňce, která je v procentech z šířky
   tabulky. Když se do ní nevešel, přetekl ven - a protože `.table-wrap` má
   `overflow-x: auto`, rozsvítil se u celé mřížky vodorovný posuvník. Odtud
   `flex-wrap` a užší číselné pole; cokoli tady musí umět zúžit. */
.inv-stepper { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); max-width: 100%; }
.inv-stepper .input.num { width: 4.5rem; min-width: 0; }
/* Hodnota slevy stojí pod sloupci Cena a DPH, ne u levého kraje řádku -
   jinak ovládací prvky pod-řádku nesedí s mřížkou nad ním. */
.inv-stepper--right { justify-content: flex-end; }

/* Přepínač %/měna je JEDEN segmentovaný přepínač, ne dvě samostatná tlačítka.
   Bez `white-space: nowrap` se zúžené tlačítko zalomilo po písmenech a „CZK"
   stálo pod sebou jako C / Z / K. */
.inv-unit { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--color-border);
            border-radius: var(--radius-sm); overflow: hidden; }
.inv-unit .btn { border: 0; border-radius: 0; background: var(--color-surface);
                 color: var(--color-text-muted); white-space: nowrap;
                 padding: 0 var(--sp-2); min-width: 2.25rem; justify-content: center; }
.inv-unit .btn + .btn { border-left: 1px solid var(--color-border); }
.inv-unit .btn.is-on { background: var(--color-brand-soft); color: var(--color-brand-text); }
.inv-hint--amount { margin: var(--sp-1) 0 0; }

/* Sleva na doklad - vlastní řádek na konci položek, ne pole ve formuláři. */
.inv-docdisc { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
               margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-sm);
               background: var(--color-surface-2); }
.inv-docdisc .input:not(.num) { flex: 1 1 240px; }

/* Systémové řádky (zaokrouhlení, odpočet zálohy, rozpuštěná sleva) - jiné
   pozadí, bez akcí: vznikají z výpočtu a uživatel je needituje (§3.2). */
.inv-sysrow > td { background: var(--color-surface-2); color: var(--color-text-muted); }

/* Souhrn. */
.inv-summary { transition: opacity var(--transition-fast); }
.inv-summary.is-recounting { opacity: .6; }
.inv-sum__row { display: flex; justify-content: space-between; gap: var(--sp-3);
                font-size: var(--fs-sm); padding: 2px 0; }
.inv-sum__rule { height: 1px; background: var(--color-border); margin: var(--sp-2) 0; }
.inv-sum__grand { display: flex; justify-content: space-between; gap: var(--sp-3);
                  font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-top: var(--sp-2); }
/* Přepočet do domácí měny patří doprava jako částky nad ním - vlevo
   visel sám a rekapitulace vypadala nedodělaně. */
.inv-sum__hc { font-size: var(--fs-xs); color: var(--color-text-muted);
               margin: var(--sp-3) 0 0; text-align: right; }
.inv-sum__actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.inv-kv td:first-child { color: var(--color-text-muted); width: 45%; }

/* „Další nastavení" - sbalené; pole, které se používá jednou za rok, nepatří
   do hlavního formuláře (skill pp-invoicing). */
.inv-more > summary { cursor: pointer; list-style: none; }
.inv-more > summary::-webkit-details-marker { display: none; }
.inv-more > summary::after { content: "▾"; margin-left: auto; color: var(--color-text-muted); }
.inv-more[open] > summary::after { content: "▴"; }

/* ── Trvalý pruh výstrah (pp-controls) ───────────────────────────────────────
   Na rozdíl od `.flash` nejde zavřít a nezhasne sám: drží, dokud trvá stav,
   který popisuje (koncept bez čísla, stornovaný doklad). Proto vlastní třída,
   ne varianta flash hlášky. */
/* @deprecated → .flash (standard UI S3). */
.alertbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.alertbar svg { flex: none; }
.alertbar--info { background: var(--color-brand-soft); color: var(--color-brand-text); }
.alertbar--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.alertbar--danger { background: var(--color-danger-soft); color: var(--color-danger-text); }
.alertbar__cta { margin-left: auto; font-weight: var(--fw-medium); text-decoration: underline; white-space: nowrap; }

/* ── Náhled dokladu (Faktury vydané, F3) ─────────────────────────────────────
   Doklad se vykresluje TOUTÉŽ šablonou a týmž stylem jako do PDF, proto tu
   nejsou žádná pravidla pro jeho obsah - jen „papír", na kterém leží. Papír
   zůstává bílý i v tmavém režimu: doklad je dokument, ne prvek rozhraní. */
.inv-prevbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.inv-prevbar__lbl { font-size: var(--fs-xs); color: var(--color-text-muted); }
.inv-prevbar__note { font-size: var(--fs-xs); color: var(--color-text-muted); }
/* Okraje musí sedět s `pageMargin` v IssuedInvoicesController::documentHtml -
   šířka obsahu 186 mm. Jinak by náhled sázel do jiné šířky než PDF. */
.inv-prevwrap { background: #fff; color: #1b2733; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 12mm;
  max-width: 210mm; margin: 0 auto var(--sp-6); overflow-x: auto; }
/* Náhled jako skutečné PDF (s právem exportu): rám přes šířku obsahu a výšku
   okna, aby byla vidět celá strana A4 bez dvojího posuvníku. */
.inv-prevpdf { display: block; width: 100%; height: calc(100vh - 260px); min-height: 640px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); }
.inv-prevpdf__fallback { margin: var(--sp-2) 0 var(--sp-6); }
@media (max-width: 900px) { .inv-prevpdf { height: 70vh; min-height: 420px; } }

/* ── Zdroje dokladu a přílohy (Faktury vydané, F4) ───────────────────────────
   Vazba doklad ↔ zdroj (§3.5) je seznam, ne tabulka: řádků je pár a každý je
   jen typ, popisek a křížek. Výběr zdroje v modálu naopak tabulka být nemá -
   u každé nabídky je vidět souhrn a varování, že už fakturu má. */
.inv-srclist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.inv-srclist__item { display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); background: var(--color-surface-2);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.inv-srclist__type { font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; }
.inv-srclist__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.inv-srcpick { max-height: 50vh; overflow-y: auto; margin-top: var(--sp-3); }
.inv-srcpick__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.inv-srcpick__item { display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.inv-srcpick__main { flex: 1 1 auto; min-width: 0; }
.inv-srcpick__title { font-weight: var(--fw-medium); }
.inv-srcpick__act { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
/* Varování „už je vyfakturováno" - tvrdý zákaz to není, jen upozornění. */
.inv-srcpick__warn { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--color-warning-text); }

/* Historie odeslání v modálu - krátký seznam, ne tabulka. */
.ise-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ise-hist__item { font-size: var(--fs-xs); color: var(--color-text-muted); }
.ise-hist__item.is-failed { color: var(--color-danger-text); }

.inv-attflags { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* Popisek pod názvem položky (např. „vykázáno 38 min", zadání §3.5). Menší
   a tlumený, ať se v hustém gridu nepere s názvem. */
.input--sub { margin-top: 2px; height: var(--control-h-sm); font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ── Nabídka formátů ke stažení (Faktury vydané, F5) ─────────────────────────
   `<details>` místo vlastního dropdownu: otevře se klávesnicí i myší, nepotřebuje
   JavaScript a zavře se sama, když se klikne jinam. */
/* Dělené tlačítko: hlavní akce + šipka na varianty (stažení PDF · další formáty). */
.inv-split { display: inline-flex; align-items: stretch; }
.inv-split__main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.inv-split__more { display: inline-flex; }
.inv-split__toggle { border-top-left-radius: 0; border-bottom-left-radius: 0;
                     border-left-width: 0; padding-inline: var(--sp-2); }

.inv-exp { position: relative; display: inline-block; }
.inv-exp > summary { list-style: none; cursor: pointer; }
.inv-exp > summary::-webkit-details-marker { display: none; }
.inv-exp__menu { position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: var(--z-dropdown, 30);
  min-width: 15rem; padding: var(--sp-1); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.inv-exp__item { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--color-text); text-decoration: none; white-space: nowrap; }
.inv-exp__item:hover, .inv-exp__item:focus { background: var(--color-brand-soft); color: var(--color-brand-text); }
/* Oddělovač skupin v nabídce „Další akce" - popisek, ne klikatelná položka. */
.inv-exp__sep { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--fs-xs);
                font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em;
                color: var(--color-text-subtle); border-top: 1px solid var(--color-border); margin-top: var(--sp-1); }
.inv-exp__menu > .inv-exp__sep:first-child { border-top: 0; margin-top: 0; }
.inv-exp__item--danger { color: var(--color-danger-text); }
.inv-exp__item--danger:hover, .inv-exp__item--danger:focus { background: var(--color-danger-soft); color: var(--color-danger-text); }
.inv-exp__item--sub { padding-left: var(--sp-5); color: var(--color-text-muted); }

/* Cíl odeslání (§8.11) je tlačítko ve vlastním formuláři, ne odkaz - POST se
   nedá poslat prostým `<a>`. Vypadat ale musí stejně jako ostatní položky
   nabídky, jinak by jedna položka vyčnívala bez důvodu. */
button.inv-exp__item { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; }
button.inv-exp__item[disabled] { color: var(--color-text-muted); cursor: not-allowed; }
button.inv-exp__item[disabled]:hover { background: none; color: var(--color-text-muted); }

/* Souhrn v potvrzovacím modálu (co, komu, za kolik). Popisek vlevo, hodnota
   vpravo - aby se částka četla očima po sloupci jako v seznamu dokladů. */
.inv-confirm { margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-2); }
.inv-confirm > div { display: flex; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--color-border); }
.inv-confirm > div:last-child { border-bottom: 0; }
.inv-confirm dt { color: var(--color-text-muted); font-size: var(--fs-sm); }
.inv-confirm dd { margin: 0; font-weight: var(--fw-medium); text-align: right; }

/* Panel modálu, když je `.modal__body` PŘÍMÝM potomkem dialogu.
   `.modal` je záměrně průhledný (bílou plochu kreslí `.modal__box`), takže
   dialog bez `.modal__box` se vykreslil bez pozadí a text ležel přes stránku.
   Osm modálů v modulu Faktury vydané tak vypadalo od F2; opravuje je jedno
   pravidlo, ne přepis osmi formulářů. */
.modal > .modal__body {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}

/* Proužek s nálezem z hlídání rejstříků (Faktury vydané §12.5). Akce se
   zarovnají doprava a na úzké obrazovce spadnou pod text - nález je věta,
   ne formulář, a nesmí rozbít hlavičku detailu klienta. */
.m365warn__actions {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-left: auto; align-items: center;
}

/* ── Nastavení modulu: záložky, úvodní věta, dvousloupcová mřížka ──────────
   Obrazovka nastavení Faktur vydaných měla čtrnáct karet pod sebou přes celou
   šířku a rozcestník s kotvami. Kotvy jen skrolovaly - uživatel pořád viděl
   všechno ostatní. Karty se proto sdružují do ZÁLOŽEK (.subnav, skill pp-menu)
   a uvnitř záložky jdou krátké karty vedle sebe.
   Karta v mřížce je flex sloupec, aby patička s Uložit seděla dole i tehdy,
   když má soused víc polí - jinak by tlačítka „plavala" v různé výšce. */
/* Povinné pole. Hvězdička je `<abbr title>`, takže nese vysvětlení i pro
   odečítač obrazovky - samotný znak „*" nikomu nic neřekne. */
.field__req { color: var(--color-danger-text); text-decoration: none; margin-left: 2px; cursor: help; }

/* Patička s Uložit pro formulář rozdělený do víc karet (Odesílání). Popisek
   vlevo říká, čeho se uložení týká - jinak není poznat, že jedno tlačítko
   ukládá všechny čtyři karty nad ním. */
.set-savebar { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.set-savebar__note { margin: 0; }

.set-lead { margin: 0 0 var(--sp-5); font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 80ch; }

.set-sec { display: block; margin-bottom: var(--sp-6); }

.set-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5); align-items: stretch;
}
.set-grid > .card { display: flex; flex-direction: column; height: 100%; }
.set-grid > .card > form { display: flex; flex-direction: column; flex: 1 1 auto; }
.set-grid .card__body { flex: 1 1 auto; }
/* Mřížka za mřížkou (Odesílatel/Příjemci → Text zprávy/Přílohy) potřebuje
   stejné odsazení jako karta za kartou, jinak se druhá řada „přilepí". */
.set-grid + .set-grid, .set-grid + .card, .card + .set-grid { margin-top: var(--sp-5); }
@media (max-width: 1100px) { .set-grid { grid-template-columns: 1fr; } }

/* Číselné pole formuláře (dny, počty, kódy). Třída se v nastavení používala od
   F6, ale nikdy nebyla definovaná - pole pro dvouciferné číslo bylo proto
   stejně široké jako pole pro e-mail a formulář vypadal rozházeně. */
.input--num {
  max-width: 140px; text-align: right; font-variant-numeric: tabular-nums;
}

/* ── Raynet → Zakládání klientů do kontaktů: editor podmínek ──────────────
   Řádek je „pole – operátor – hodnota"; skupina je jedna OR větev, uvnitř
   které pravidla platí zároveň (AND). Skupiny jsou opticky oddělené rámečkem,
   aby bylo na první pohled vidět, co platí s čím - bez toho je seznam řádků
   nečitelný, jakmile jsou skupiny dvě.

   Jen tokeny, žádný hex ani px (pp-design §1). Mobile-first: pod 720 px se
   řádek skládá pod sebe, aby se dal filtr nastavit i na telefonu. */
.rc-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  background: var(--color-surface);
}
.rc-group + .rc-group { position: relative; }
/* „NEBO" mezi skupinami - text, ne jen mezera; jinak není poznat, že jsou
   skupiny alternativy a ne pokračování seznamu. */
.rc-group + .rc-group::before {
  content: attr(data-or);
  position: absolute;
  top: calc(-1 * var(--sp-3));
  left: var(--sp-4);
  padding: 0 var(--sp-2);
  background: var(--color-bg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  letter-spacing: .04em;
}
.rc-group__head {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--sp-2);
}
.rc-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}
.rc-rule + .rc-rule { border-top: 1px dashed var(--color-border); }
.rc-rule__field { flex: 1 1 14rem; min-width: 0; }
.rc-rule__op    { flex: 0 1 11rem; min-width: 0; }
.rc-rule__val   { flex: 2 1 14rem; min-width: 0; display: flex; }
.rc-rule__val > * { width: 100%; }
.rc-rule__active { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 45rem) {
  .rc-rule { flex-direction: column; align-items: stretch; }
  .rc-rule__active { align-self: flex-start; }
}

/* ── Raynet: našeptávač kontaktů v modálu „Spárovat" ─────────────────────
   Seznam nabídnutých kontaktů pod polem hledání. Tlačítka, ne odkazy - výběr
   nikam nenaviguje, jen vyplní skryté pole formuláře.
   Jen tokeny, žádný hex ani px. */
.rc-suggest {
  display: grid;
  gap: var(--sp-1);
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  background: var(--color-surface-2);
}
.rc-suggest__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
.rc-suggest__item:hover,
.rc-suggest__item:focus-visible { background: var(--color-surface); }

/* ── Raynet → fronta návrhů (/raynet/proposals) ───────────────────────────
   Jeden návrh = jedna karta v kartě. Karty nejsou rámečkované jako `.card`,
   jen oddělené linkou - ve frontě jich bývají desítky a vnořené rámečky
   dělají z obrazovky mřížku, ve které se změna hůř hledá než v seznamu.

   Jen tokeny, žádný hex ani px (pp-design §1). */
.rq-item {
  padding: var(--sp-4) 0;
}
.rq-item + .rq-item { border-top: 1px solid var(--color-border); }
.rq-item:first-child { padding-top: 0; }

.rq-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.rq-item__head > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.rq-item__name { font-size: var(--fs-base); }
.rq-item__meta { font-size: var(--fs-xs); display: flex; align-items: center; gap: var(--sp-2); }

.rq-item__body > .table-wrap { margin-bottom: var(--sp-3); }
.rq-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* `create` - náhled dat, ze kterých by kontakt vznikl. Mřížka, ne tabulka:
   polí je málo a jsou to dvojice název/hodnota bez porovnání. Popisek je NAD
   hodnotou; vedle sebe by je široká mřížka roztáhla přes půl obrazovky a oko
   by je přestalo spojovat. */
.rq-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-3);
}
.rq-preview__row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rq-preview__k {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-text-muted);
}
.rq-preview__v { font-size: var(--fs-sm); color: var(--color-text); word-break: break-word; }

/* Stav jednoho pole v diffu: tečka a text, ne odznak - odznaků by byly na
   obrazovce desítky a řádek by se v nich ztratil. */
.rq-state { font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; }
.rq-state--accepted { color: var(--color-success-text); }
.rq-state--ignored  { color: var(--color-text-subtle); }

/* `incomplete` - výčet chybějících údajů. */
.rq-list { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
.rq-list li { font-size: var(--fs-sm); }

@media (max-width: 45rem) {
  .rq-item__head { flex-direction: column; align-items: stretch; }
  .rq-item__actions .btn { flex: 1 1 auto; }
}

/* Uzamčený (vystavený) doklad: „Uložit" přímo u poznámky a jazyka tisku -
   jediných polí, která jde u něj změnit (místo plovoucího tlačítka v pruhu). */
.inv-lockedsave { display: flex; justify-content: flex-end; margin-top: var(--sp-2); }

/* Zástupné symboly (partials/placeholder_help.php) - sbalitelný seznam
   s tlačítky pro vložení do pole, ve kterém je kurzor. */
.ph-help { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.ph-help__sum { cursor: pointer; color: var(--color-brand-text); width: fit-content; }
.ph-help__body { margin-top: var(--sp-2); }
.ph-help__list { list-style: none; margin: var(--sp-2) 0 0; padding: 0;
                 display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--sp-1) var(--sp-4); }
.ph-help__list li { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.ph-chip { font: 12px/1.4 var(--font-mono, ui-monospace, monospace); padding: 1px 6px; border-radius: 4px;
           border: 1px solid var(--color-border); background: var(--color-surface-2, #f4f6f9);
           color: inherit; cursor: pointer; white-space: nowrap; }
.ph-chip:hover { border-color: var(--color-primary); }
/* Formát, který zdroj dokladu neumí vyrobit: vyšedlý S DŮVODEM. */
.ise-att.is-disabled { opacity: .6; }
.ise-att__why { font-size: 12px; }

/* ---- M365 šablony v2 (F0): „Aktualizovat" – rozdíl a upozornění ---- */
.m365-warn-list { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.m365-diff-before { background: var(--color-danger-soft); overflow-wrap: anywhere; }
.m365-diff-after { background: var(--color-success-soft); overflow-wrap: anywhere; }
.m365-confirm__text { margin: 0; white-space: pre-line; }
.m365-pf-deps { margin-top: var(--sp-2); }
.m365-tpl-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-2) 0 0; }

/* ---- M365 šablony: licence a riziko, filtr knihovny ---- */
.confirm__text { white-space: pre-line; }
.m365-lic { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.m365-risk { margin: var(--sp-1) 0 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-warning-text); border-radius: var(--radius-md, 6px); background: var(--color-warning-soft); color: var(--color-warning-text); font-size: var(--fs-sm); }
.m365-risk-icon { color: var(--color-warning-text); vertical-align: middle; }
.m365-tpl-filter { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; }
.m365-tpl-filter .field { margin: 0; }

/* ---- M365 šablony v2 (F2): location model – matice „kdo × odkud" ---- */
.m365-matrix td.num, .m365-matrix th.num { text-align: center; white-space: nowrap; }
.m365-mx-ok { color: var(--color-success-text); background: var(--color-success-soft); }
.m365-mx-no { color: var(--color-danger-text); background: var(--color-danger-soft); }
.m365-steps-list { margin: var(--sp-2) 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
.m365-legacy { border-color: var(--color-warning); }

/* ---- M365 šablony v2 (F3): Reporty ---- */
.m365-rep-plans { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .m365-rep-plans { grid-template-columns: 1fr 1fr; } }
.m365-rep-plan { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.m365-rep-plan__title { font-size: var(--fs-md); font-weight: var(--fw-medium); margin: 0; display: flex; gap: var(--sp-2); align-items: center; }
/* Katalog reportů (karty z ReportMeta, docs/auth-metody-navrh.md kap. 8). */
/* Jedna mřížka: 4 karty na řádek na širokém displeji, 2 na středním, 1 na telefonu. */
.m365-rep-cards { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .m365-rep-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .m365-rep-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.m365-rep-card__cat { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.m365-rep-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.m365-rep-card.is-blocked { background: var(--color-bg); }
.m365-rep-card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0; }
.m365-rep-card__q { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.m365-rep-card__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--fs-xs); }
.m365-rep-card__act { margin-top: auto; display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; }
/* Detail reportu (R4, maketa 10): název + jeden řádek metadat vlevo, akce vpravo
   (Exportovat, Odeslat e-mailem, Spustit znovu). Zpět vede drobečková navigace. */
.m365-rep-head { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-4); }
.m365-rep-head > .m365-warn-text { flex-basis: 100%; margin: 0; }
/* Jedna lišta akcí vpravo: zpět, spustit znovu, export, odeslat. */
.m365-rep-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: flex-end; }
.m365-rep-head__title .page-h { margin: 0; }
.m365-rep-head__meta { margin: var(--sp-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; font-size: var(--fs-sm); color: var(--color-text-muted); }
.m365-rep-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* Upozornění na nejhorší nález + souhrnné karty pod hlavičkou. */
.m365-rep-flash__text { flex: 1 1 auto; min-width: 0; }
.m365-rep-flash__link { flex: none; color: inherit; font-weight: var(--fw-semibold); text-decoration: underline; white-space: nowrap; }
.m365-rep-sum { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; margin-bottom: var(--sp-4); }
@media (min-width: 720px) { .m365-rep-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.m365-rep-sum__card { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m365-rep-sum__v { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.2; font-variant-numeric: tabular-nums; }
.m365-rep-sum__v.is-error { color: var(--color-danger-text); }
.m365-rep-sum__v.is-warning { color: var(--color-warning-text); }
.m365-rep-sum__v.is-ok { color: var(--color-success-text); }
.m365-rep-sum__l { color: var(--color-text-muted); font-size: var(--fs-sm); }
.m365-rep-attach { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; }
.m365-rep-attach .field__label, .m365-rep-attach .field__hint { flex-basis: 100%; }
/* Seznam reportů (R5, maketa 11): přepínač druhu, název + období, souhrn vyhodnocení. */
.m365-rep-kinds { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-3) var(--sp-5) 0; }
.m365-rep-kinds__item { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--fs-sm); text-decoration: none; }
.m365-rep-kinds__item:hover { color: var(--color-text); background: var(--color-surface-2); }
.m365-rep-kinds__item.is-active { background: var(--color-brand-soft); color: var(--color-brand-text); font-weight: var(--fw-medium); }
.m365-rep-kinds__n { font-variant-numeric: tabular-nums; }
.m365-rep-list__title { display: block; font-weight: var(--fw-semibold); }
.m365-rep-list__sub { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; }
.m365-rep-list__eval { min-width: 220px; }
.m365-rep-list__sum { font-size: var(--fs-xs); color: var(--color-text-muted); margin-left: var(--sp-1); }
.m365-rep-list__delta { white-space: nowrap; }
.m365-rep-list__sent { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
/* Řádek skupiny podle data (table-tools.js, `data-group-labels`). */
.table tr.tt-group > th { padding: var(--sp-2) var(--sp-3); background: var(--color-bg); color: var(--color-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; text-align: left; }

/* Obsah reportu (HTML z ReportRenderer - stejné jako soubor a e-mail). Styly
   jen zpřehledňují: souhrn jako čísla, oddíly jako karty, poznámky jako
   upozornění, zvýrazněný řádek proužkem vlevo místo plného podbarvení. */
.m365-rep-doc { overflow-x: auto; }
.m365-rep-doc > .rep > .rep-meta:first-child { display: none; } /* firma a období jsou v hlavičce stránky */
.m365-rep-doc .rep-meta { color: var(--color-text-muted); font-size: var(--fs-sm); }
.m365-rep-doc .rep-sum { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.m365-rep-doc .rep-chip { display: inline-flex; flex-direction: column-reverse; min-width: 120px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--color-text-muted); background: var(--color-surface); }
.m365-rep-doc .rep-chip strong { font-size: var(--fs-lg); color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.m365-rep-doc h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: var(--sp-5) 0 var(--sp-2); }
.m365-rep-doc .rep-notes { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 4px solid var(--color-warning); background: var(--color-warning-soft); border-radius: var(--radius-sm); }
.m365-rep-doc .rep-notes li + li { margin-top: var(--sp-1); }
.m365-rep-doc .rep-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.m365-rep-doc .rep-table th { position: sticky; top: 0; background: var(--color-bg); font-weight: var(--fw-semibold); }
.m365-rep-doc .rep-table th, .m365-rep-doc .rep-table td { border-bottom: 1px solid var(--color-border); padding: var(--sp-2); text-align: left; vertical-align: top; }
.m365-rep-doc .rep-table tbody tr:hover td { background: var(--color-bg); }
.m365-rep-doc .rep-flag td { background: transparent; }
.m365-rep-doc .rep-flag td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); }
/* Tabulka reportu: nikdy širší než okno - posun jen uvnitř obalu. Identita jako
   jméno + UPN pod ním, upozornění jako štítky ve vlastním sloupci. */
.m365-rep-sheet, .m365-rep-sheet .card__body { min-width: 0; max-width: 100%; }
.m365-rep-doc .rep-tablewrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.m365-rep-doc .rep-tablewrap .rep-table th, .m365-rep-doc .rep-tablewrap .rep-table td { border-bottom: 1px solid var(--color-border); }
.m365-rep-doc .rep-tablewrap .rep-table tbody tr:last-child td { border-bottom: 0; }
.m365-rep-doc .rep-table--main td { white-space: nowrap; }
.m365-rep-doc .rep-table--main .rep-col-main { min-width: 200px; white-space: normal; }
.m365-rep-doc .rep-table--main .rep-col-flags { min-width: 160px; white-space: normal; }
.m365-rep-doc .rep-main { display: block; font-weight: var(--fw-semibold); }
.m365-rep-doc .rep-sub { display: block; color: var(--color-text-muted); font-size: var(--fs-xs); word-break: break-all; }
.m365-rep-doc .rep-flagchip { display: inline-block; margin: 2px var(--sp-1) 2px 0; padding: 0 var(--sp-2); border-radius: 999px; background: var(--color-warning-soft); color: var(--color-warning-text); font-size: var(--fs-xs); line-height: 1.6; }
/* Proč je řádek rizikový - přímo pod názvem položky (ReportRenderer::inner). */
.m365-rep-doc .rep-flagtext { display: block; margin-top: 2px; color: var(--color-warning-text); font-size: var(--fs-xs); }
.m365-rep-doc .rep-changes .rep-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Starší uložené reporty mají zvýraznění v samostatném řádku. */
.m365-rep-doc .rep-flagrow td { color: var(--color-warning-text); font-size: var(--fs-xs); padding-top: 0; box-shadow: inset 3px 0 0 var(--color-warning); }
.m365-rep-doc .rep-flag:has(+ .rep-flagrow) td { border-bottom: 0; }
/* Panely reportu (auth_methods: verdikt, dlaždice, politika, nouzové účty, SSPR). */
.m365-rep-doc .rep-panel { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.m365-rep-doc .rep-panel > h3 { margin-top: 0; }
.m365-rep-doc .rep-panel--verdict, .m365-rep-doc .rep-panel--tiles:not(:has(> h3)) { border: 0; padding: 0; background: transparent; }
.m365-rep-doc .rep-panel .rep-meta:last-child { margin-bottom: 0; }
.m365-rep-doc .rep-verdict { border-left: 4px solid var(--color-border); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); margin: 0; }
.m365-rep-doc .rep-verdict.rep-lvl-ok { border-color: var(--color-success); background: var(--color-success-soft); }
.m365-rep-doc .rep-verdict.rep-lvl-warning { border-color: var(--color-warning); background: var(--color-warning-soft); }
.m365-rep-doc .rep-verdict.rep-lvl-error { border-color: var(--color-danger); background: var(--color-danger-soft); }
.m365-rep-doc .rep-tiles { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.m365-rep-doc .rep-tile { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); }
.m365-rep-doc .rep-tile__v { display: block; font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.m365-rep-doc .rep-tile__l { display: block; color: var(--color-text-muted); font-size: var(--fs-xs); }
.m365-rep-doc .rep-tile.rep-lvl-error .rep-tile__v, .m365-rep-doc .rep-empty.rep-lvl-error { color: var(--color-danger-text); }
.m365-rep-doc .rep-tile.rep-lvl-warning .rep-tile__v { color: var(--color-warning-text); }
/* Nové reporty: oddíly jsou karty (ReportRenderer), detail je skládá pod sebe
   bez druhého obalu. Souhrnné štítky a verdikt dokumentu nesou v portálu karty
   nad obsahem, proto se u reportu s vyhodnocením skrývají. */
.m365-rep-doc--cards { overflow: visible; min-width: 0; }
.m365-rep-doc--cards > .rep { display: grid; gap: var(--sp-4); min-width: 0; }
.m365-rep-doc--cards.has-checks > .rep > .rep-sum, .m365-rep-doc--cards.has-checks .rep-panel--verdict { display: none; }
.m365-rep-doc .rep-panel.card { margin: 0; padding: 0; min-width: 0; }
.m365-rep-doc .rep-panel.card .card__body { min-width: 0; }
.m365-rep-doc .rep-panel.card .card__title { margin: 0; }
.m365-rep-doc .rep-panel.card .rep-aside { margin-left: auto; }
/* Odkaz z upozornění (#rep-…) nesmí schovat nadpis oddílu pod lepivou lištu. */
.m365-rep-doc [id^="rep-"] { scroll-margin-top: calc(var(--topbar-h) + var(--sp-4)); }
/* V podbarveném (kritickém) řádku má štítek obrys, jinak by splynul s pozadím. */
.m365-rep-doc tr.rep-lvl-error .rep-badge--error { box-shadow: inset 0 0 0 1px var(--color-danger); }
.m365-rep-doc--cards > .rep > .rep-sum, .m365-rep-doc--cards .rep-panel--verdict { margin: 0; }
/* Štítek stavu v buňce (politika, nouzové účty) a v řádku vyhodnocení. */
.m365-rep-doc .rep-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 1px var(--sp-2); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; background: var(--color-surface-2); color: var(--color-text-muted); }
.m365-rep-doc .rep-badge--ok { background: var(--color-success-soft); color: var(--color-success-text); }
.m365-rep-doc .rep-badge--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.m365-rep-doc .rep-badge--error { background: var(--color-danger-soft); color: var(--color-danger-text); }
/* Vyhodnocení podle doporučení: tečka · titulek + štítek · vysvětlení · kód vpravo. */
.m365-rep-doc .rep-checks { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.m365-rep-doc .rep-checks td { padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.m365-rep-doc .rep-checks tr:first-child td { padding-top: 0; }
.m365-rep-doc .rep-checks tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.m365-rep-doc .rep-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--sp-2); vertical-align: middle; background: var(--color-text-muted); }
.m365-rep-doc .rep-dot--ok { background: var(--color-success); }
.m365-rep-doc .rep-dot--warning { background: var(--color-warning); }
.m365-rep-doc .rep-dot--error { background: var(--color-danger); }
.m365-rep-doc .rep-ck__title { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.m365-rep-doc .rep-ck__detail { display: block; margin: 2px 0 0 calc(8px + var(--sp-2)); color: var(--color-text-muted); }
.m365-rep-doc .rep-ck__code { padding-left: var(--sp-3); text-align: right; white-space: nowrap; color: var(--color-text-muted); font-size: var(--fs-xs); }
/* Relativní datum (rel_date_html): bez zalomení, den v týdnu a čas pod ním. */
.reldate { white-space: nowrap; }
.reldate__sub { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.m365-rep-doc tr.rep-lvl-error td { background: var(--color-danger-soft); }
.m365-rep-doc tr.rep-lvl-warning td { background: var(--color-warning-soft); }
.m365-sd { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }

/* ── M365 průvodce v2 (F5, návrh 5.6) ─────────────────────────────────── */
.m365-wz-steps { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.m365-wz-step { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--color-text-muted);
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); }
.m365-wz-step__n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-pill);
  background: var(--color-surface-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.m365-wz-step.is-current { color: var(--color-text); border-color: var(--color-brand); background: var(--color-brand-soft); }
.m365-wz-step.is-current .m365-wz-step__n { background: var(--color-brand); color: var(--color-surface); }
.m365-wz-step.is-done { color: var(--color-text); }
.m365-wz-alt { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.m365-wz-facts { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0; }
.m365-wz-facts dt { color: var(--color-text-muted); font-size: var(--fs-sm); }
.m365-wz-facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.m365-radio.is-disabled { opacity: .55; }
.m365-tpl-row.is-disabled .m365-tpl-pickbox > span > strong,
.m365-tpl-row.is-disabled .m365-tpl-pickbox > span > .muted { opacity: .6; }
.m365-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.m365-mod { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; font-size: var(--fs-sm); }
.m365-mod:has(input:checked) { border-color: var(--color-brand); background: var(--color-brand-soft); }
.m365-mod.is-off { opacity: .55; cursor: not-allowed; background: var(--color-surface-2); }
.m365-mod__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.m365-mod__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.m365-mod__creates { color: var(--color-text-muted); font-size: var(--fs-xs); }
.m365-wz-counts { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.m365-wz-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.m365-wz-kind { padding: var(--sp-2) var(--sp-3) 0; }
.m365-st--new { background: var(--color-info-soft); color: var(--color-info-text); }
.m365-st--unchanged, .m365-st--exists { background: var(--color-surface-2); color: var(--color-text-muted); }
.m365-st--changed { background: var(--color-warning-soft); color: var(--color-warning-text); }
.m365-st--skipped { background: var(--color-surface-2); color: var(--color-text-subtle); }
.m365-st--conflict { background: var(--color-danger-soft); color: var(--color-danger-text); }
.m365-wz-diff summary { cursor: pointer; font-size: var(--fs-sm); }
.m365-wz-diff ul { margin: var(--sp-1) 0; padding-left: var(--sp-4); font-size: var(--fs-xs); word-break: break-word; }
.m365-wz-before { color: var(--color-danger-text); }
.m365-wz-after { color: var(--color-success-text); }
@media (max-width: 640px) { .m365-wz-facts { grid-template-columns: 1fr; } }
.m365-loc-legend { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
.m365-errsum ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
.m365-errsum a { color: inherit; text-decoration: underline; }
.m365-errsum a:hover { text-decoration: none; }
.m365-inline { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.m365-dup-row td { background: var(--color-warning-soft); }
.m365-dup-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.m365-dup-list form { display: inline; }
.m365-dup-list .field__hint { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
.m365-wz-section { margin-top: var(--sp-5); }
.m365-wz-ok { color: var(--color-success-text); display: flex; align-items: center; gap: var(--sp-1); margin: 0; }
.m365-wz-list > li { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border); }
.m365-wz-list > li:last-child { border-bottom: 0; }
.m365-wz-list > li > .badge { flex: none; }
.m365-wz-group { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-top: var(--sp-4); overflow: hidden; }
.m365-wz-group__head { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3);
  background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.m365-wz-group .table { margin: 0; }
.m365-wz-sd { margin-top: var(--sp-3); }
.m365-wz-update { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); }
.m365-wz-update p { margin: 0 0 var(--sp-1); }
.m365-wz-update__all { padding-bottom: var(--sp-1); border-bottom: 1px solid var(--color-border); }
/* Cíl kotvy nesmí skončit pod pevnou horní lištou (i bez JS). */
.m365-errsum ~ * [id], [id].is-invalid { scroll-margin-top: calc(var(--topbar-h) + var(--sp-6)); }
.m365-delivery .m365-link-box { margin: 0 0 var(--sp-2) var(--sp-6); }
.m365-mod__tools { margin-left: auto; display: inline-flex; gap: var(--sp-1); }
.m365-wz-objlist { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.m365-wz-objlist > li { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--color-border); }
.m365-wz-objlist > li:last-child { border-bottom: 0; }
.m365-wz-objlist__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.m365-wz-objlist__d { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.m365-wz-links { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
.m365-wz-objlist__state { margin-left: auto; }

/* =====================================================================
   Panel pracovního prostoru (standard UI S7, zadání kap. 3.2, pp-menu)
   ---------------------------------------------------------------------
   Panel je TŘETÍ SLOUPEC mřížky .app (grid-area wsrail, base.css) hned vedle
   levého menu – vypadá jako jeho druhá úroveň, ne jako karta. Vnitřek jsou
   komponenty levého menu (navitem, navitem--group, subitems, subitem).
   Pravidla sbaleného menu jsou zúžená na `.sidebar` (F1), takže sem nedosáhnou.
   ===================================================================== */
.ws-rail {
  grid-area: wsrail; align-self: start;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  background: var(--color-surface); border-right: 1px solid var(--color-border);
  border-radius: 0; padding: var(--sp-2) 0;
}
.ws-rail__head {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-2);
}
.ws-rail__name { font-weight: var(--fw-semibold); color: var(--color-text); overflow-wrap: anywhere; }
.ws-rail__badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ws-rail__switch { font-size: var(--fs-sm); color: var(--color-text-muted); text-decoration: none; }
.ws-rail__switch:hover { color: var(--color-brand-text); text-decoration: underline; }
.ws-rail__partner { font-size: var(--fs-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.ws-rail__partner a { color: var(--color-brand-text); }
.ws-rail .subitem > svg:last-child, .ws-rail--mobile .subitem > svg:last-child { margin-left: auto; flex: none; color: var(--color-text-subtle); }
.ws-rail__nav { display: flex; flex-direction: column; gap: 2px; }
.ws-rail .navitem, .ws-rail--mobile .navitem { padding: 0 var(--sp-3); }
.ws-rail .subitems, .ws-rail--mobile .subitems { padding-left: calc(18px + var(--sp-2)); }
.ws-rail__lock { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--color-warning-text); }
.subitem.is-locked, .navitem.is-locked { display: flex; align-items: center; gap: var(--sp-2); }
.ws-rail--mobile { display: none; }
@media (max-width: 899px) {
  .ws-rail { display: none; }   /* mobil: žádný 3. sloupec, panel je <details> v obsahu */
  .ws-rail--mobile {
    display: block; margin-bottom: var(--sp-4);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  }
  .ws-rail--mobile > summary {
    cursor: pointer; padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-semibold); color: var(--color-text);
    min-height: var(--tap-min); display: flex; align-items: center;
  }
  .ws-rail--mobile[open] > summary { border-bottom: 1px solid var(--color-border); }
  .ws-rail--mobile .ws-rail__head { border-bottom: 0; padding-bottom: 0; }
  .ws-rail--mobile .ws-rail__nav { padding: var(--sp-2) 0; }
}

/* M365 přehled: karta „Připojení" (ui-std P9) – jen údaje, které nejsou v panelu tenantu. */
.m365-conn__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); margin: 0; }
.m365-conn__grid dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 2px; }
.m365-conn__grid dd { margin: 0; color: var(--color-text); }
.m365-conn__tid { display: flex; align-items: center; gap: var(--sp-1); }
.m365-conn__tid code { font-family: var(--font-mono); font-size: var(--fs-sm); }
.m365-conn .card__actions { display: flex; align-items: center; gap: var(--sp-1); }
.m365-conn .card__actions form { margin: 0; }
/* Cesta zpět na stránce otevřené z jiného místa (R1: ?from=reports). */
.m365-from { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.m365-from a { display: inline-flex; align-items: center; gap: var(--sp-1); }

/* ═══ Panel detailu (standard UI S9) ═════════════════════════════════════
   <dialog class="drawer"> zprava přes seznam (PP.drawer v app.js). Hlavička,
   posuvné tělo, pevná patička s akcemi. Na mobilu celá šířka. Plná stránka
   (bez JS) vkládá tentýž partial do .drawer-page. Jen tokeny (S1). */
.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: none; height: 100%; max-height: 100%;
  width: min(620px, 100vw); max-width: 100vw; background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-lg); z-index: var(--z-modal); }
.drawer[open] { display: flex; flex-direction: column; }
.drawer::backdrop { background: rgba(15, 23, 32, .45); }
.drawer__inner, .drawer-page { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.drawer-page { max-width: 760px; padding: 0; overflow: hidden; }
.drawer__head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border); }
.drawer__headmain { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--sp-1); }
.drawer__title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.25; }
.drawer__title:focus { outline: none; }
.drawer__sub { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); word-break: break-word; }
.drawer__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; font-size: var(--fs-xs); }
.drawer__x { flex: none; border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--color-text-muted); padding: 0 var(--sp-1); }
.drawer__x:hover { color: var(--color-text); }
.drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-5); align-content: start; }
.drawer__foot { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.drawer__foot form { display: contents; }
.drawer__spacer { margin-left: auto; }
.drawer__loading { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-8, 48px) 0; color: var(--color-text-muted); }
.drawer__sec { display: grid; gap: var(--sp-3); }
.drawer__sec > h3 { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.drawer__sec > h3 .drawer__secnote { text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); }
@media (max-width: 640px) { .drawer { inset: 0 auto 0 0; width: 100vw; } .drawer__head, .drawer__body, .drawer__foot { padding-left: var(--sp-4); padding-right: var(--sp-4); } }
/* „Co dělá" – výklad konfigurace jako dvojice štítek · hodnota. */
.what { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-5); margin: 0; font-size: var(--fs-sm); }
.what dt { color: var(--color-text-muted); }
.what dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.what__purpose { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--fs-sm); }
.what__except { display: block; color: var(--color-text-muted); }
.what__op { color: var(--color-text-muted); font-size: var(--fs-xs); text-transform: uppercase; }
.what__block { color: var(--color-danger-text); font-weight: var(--fw-semibold); }
.what__missing { color: var(--color-danger-text); text-decoration: line-through; }
.what__missing + .what__miss-note { color: var(--color-danger-text); }
/* Závislosti – řádek: tečka stavu · objekt · detail · odkaz. */
.dep { list-style: none; margin: 0; padding: 0; }
.dep__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.dep__item:last-child { border-bottom: 0; }
.dep__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: .5em; background: var(--color-text-muted); grid-row: span 2; }
.dep__dot--ok { background: var(--color-success); }
.dep__dot--warning { background: var(--color-warning); }
.dep__dot--error { background: var(--color-danger); }
.dep__title { font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.dep__title.is-error { color: var(--color-danger-text); }
.dep__detail { grid-column: 2; color: var(--color-text-muted); font-size: var(--fs-xs); }
.dep__detail.is-error { color: var(--color-danger-text); }
.dep__link { grid-column: 3; grid-row: 1; white-space: nowrap; }

/* Nastavení Cockpitu se sekcemi (lokality na tři místa, kap. 5, maketa 14). */
.m365-setnav a { display: grid; gap: 2px; }
.m365-setnav__label { display: inline-flex; align-items: center; gap: var(--sp-2); }
.m365-setnav__sub { font-size: var(--fs-xs); color: var(--color-text-muted); padding-left: calc(16px + var(--sp-2)); }
.m365-setbody { display: grid; gap: var(--sp-5); min-width: 0; }
.m365-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); }

/* Lokality na tři místa (kap. 3 a 4, makety 12 a 13). */
.m365-loc-tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--sp-4); }
.m365-loc-tile { padding: var(--sp-3) var(--sp-4); display: grid; gap: 2px; min-width: 0; }
.m365-loc-tile__l { font-size: var(--fs-sm); color: var(--color-text-muted); }
.m365-loc-tile__v { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.25; overflow-wrap: anywhere; }
.m365-loc-tile__v.is-warning { color: var(--color-warning-text); }
.m365-loc-tile__s { font-size: var(--fs-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.m365-loc-obj { font-weight: var(--fw-semibold); }
.m365-mx-report { color: var(--color-warning-text); background: var(--color-warning-soft); }
.m365-mx-note { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.m365-mx-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.m365-mx-legend .m365-mx-ok, .m365-mx-legend .m365-mx-report, .m365-mx-legend .m365-mx-no { padding: 0 var(--sp-1); border-radius: var(--radius-sm); }
.m365-matrix a.mono { font-weight: var(--fw-semibold); }
.m365-loc-switch { display: flex; justify-content: flex-end; margin-bottom: var(--sp-3); }
.m365-loc-steps { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 1100px) { .m365-loc-steps { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.m365-stepno { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--color-brand-soft); color: var(--color-brand-text); font-size: var(--fs-sm); margin-right: var(--sp-1); }
.m365-loc-list { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.m365-loc-list__chips { padding-left: calc(18px + var(--sp-2)); align-items: center; }
.m365-loc-list__edit { margin-left: auto; font-size: var(--fs-xs); }
.m365-loc-deploy { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: flex-end; }
/* Seznam CA: název = odkaz na panel detailu, závislosti tečkou (lokality-ca 6.1). */
.m365-ca-name { font-weight: var(--fw-semibold); }
.m365-ca-dep { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.m365-ca-dep .dep__dot { margin-top: 0; grid-row: auto; }
.m365-ca-dep--error { color: var(--color-danger-text); }

/* ── Partnerské doklady z PAX8 (přeprodej, docs/pax8-preprodej-navrh.md kap. 7) ──
   Světlý jazyk fakturace: tenké karty, stavová tečka místo velkého štítku, ploché
   tabulky. Skupina zákazníka je <details> - řádek souhrnu, tělo s položkami. */
.pres-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); padding: var(--sp-3) var(--sp-5); }
.pres-summary__stats { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; font-size: var(--fs-sm); }
.pres-summary__stats .status-dot { margin: 0 4px 0 6px; }
.pres-summary__done { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.pres-summary__done .status-dot { margin-right: 4px; }
.pres-partner__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--color-text); }
.pres-partner__meta .status-dot { margin: 0 4px 0 6px; }
.pres-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--sp-5); }
.pres-groups { display: grid; }
.pres-group { border-top: 1px solid var(--color-border); }
.pres-group > summary { list-style: none; cursor: pointer; }
.pres-group > summary::-webkit-details-marker { display: none; }
.pres-group__row { display: grid; grid-template-columns: auto minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.6fr) auto; align-items: center;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); transition: background var(--transition-fast); }
.pres-group__row:hover { background: var(--color-brand-soft); }
.pres-group[open] > .pres-group__row { background: var(--color-surface-2); }
.pres-group__name { font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.pres-group__status { font-size: var(--fs-sm); }
.pres-group.is-blocked .pres-group__status { color: var(--color-danger-text); }
.pres-group.is-skipped .pres-group__status { color: var(--color-text-muted); }
.pres-group__meta { font-size: var(--fs-xs); }
.pres-group__total { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pres-group__body { padding: var(--sp-3) var(--sp-5) var(--sp-4); display: grid; gap: var(--sp-3); }
.pres-group__body .pres-chips { padding: 0; }
.pres-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); column-gap: var(--sp-5); }
.pres-facts dt { color: var(--color-text-muted); }
.pres-facts dd { margin: 0; text-align: right; }
.pres-items td .badge { margin-left: 4px; }
.pres-items td.num, .pres-items th.num { white-space: nowrap; }
.pres-diff { color: var(--color-warning-text); font-weight: var(--fw-medium); }
.pres-sub > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--color-brand-text); padding: var(--sp-2) 0; }
.pres-sub > summary:hover { text-decoration: underline; }
.pres-skipped { padding: 0 var(--sp-5) var(--sp-3); border-top: 1px solid var(--color-border); }
.pres-note { white-space: normal; font-size: var(--fs-xs); }
@media (max-width: 899px) {
  .pres-group__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pres-group__status, .pres-group__meta { grid-column: 2 / -1; }
}
.pres-doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-2) var(--sp-3); background: var(--color-surface-2); border-radius: var(--radius-sm); }
.pres-doc__info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.pres-doc__info .status-dot { margin-right: 6px; }
.pres-doc__actions { display: flex; gap: var(--sp-2); }
.pres-run { border-top: 1px solid var(--color-border); padding: var(--sp-3) var(--sp-5); }
.pres-run__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.pres-superseded td { color: var(--color-text-muted); }
.pres-superseded td.mono, .pres-superseded td:nth-child(2) { text-decoration: line-through; }
.pres-timeline { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.pres-timeline__row { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); align-items: start; font-size: var(--fs-sm); }
.pres-timeline__row .status-dot { margin-top: 6px; }
.pres-timeline__meta { color: var(--color-text-muted); font-size: var(--fs-xs); }
.pres-cmp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.pres-cmp-filter .input { width: auto; }
.pres-cmp-filter__sum { margin-left: auto; font-size: var(--fs-sm); }
.pres-cmp-filter__sum .status-dot { margin-right: 6px; }

/* Karta „CSP přeprodej" (F5) - cíle a pravidla sloučených řádků. */
.pres-targets tr.is-disabled td { color: var(--color-text-muted); }
.pres-targets td:first-child { width: 2rem; vertical-align: top; }
.pres-targets td { vertical-align: top; }
.pres-rule { border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-3); }
.pres-rule legend { padding: 0 var(--sp-2); font-weight: var(--fw-medium); }
.pres-targets .small { font-size: var(--fs-sm); }

/* Rozdíl proti cenovému enginu v náhledu přeprodeje: štítek ve skupině a zvýraznění položek. */
.pres-engine-badge { margin-left: var(--sp-2); }
.pres-items tr.pres-item--diff td { background: var(--color-warning-soft); }
.pres-empty-filter { padding: var(--sp-2) var(--sp-5); }

/* ---- Veřejné stránky výkazu (potvrzení schválení z e-mailu, výkazy §4.4) ---- */
body.rpub { background: var(--color-bg); min-height: 100vh; }
.rpub__head { display: flex; align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-4) var(--sp-2); }
.rpub__logo { max-height: 2.5rem; max-width: 12rem; object-fit: contain; }
.rpub__brand { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-brand); }
.rpub__main { max-width: 40rem; margin: 0 auto; padding: var(--sp-4) var(--sp-4) var(--sp-8); }
.rpub__card .card__body { display: grid; gap: var(--sp-4); }
.rpub__card .page-sub { margin-bottom: 0; }
.rpub__dl { padding: var(--sp-4); background: var(--color-surface-2); border-radius: var(--radius-sm); }
.rpub__strong { font-weight: var(--fw-bold); }
.rpub__link, .rpub__note { margin: 0; }
.rpub__note { font-size: var(--fs-xs); color: var(--color-text-muted); }
.rpub__muted { margin: var(--sp-1) 0 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.rpub__form .field:last-of-type { margin-bottom: var(--sp-2); }
.rpub__form .textarea { font-family: var(--font-sans); }
.rpub__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rpub__state { justify-items: start; }
.rpub__state p { margin: 0; }
.rpub__box { width: 100%; padding: var(--sp-3) var(--sp-4); background: var(--color-surface-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.rpub__ico { width: 3rem; height: 3rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; }
.rpub__ico--ok     { background: var(--color-success-soft); color: var(--color-success-text); }
.rpub__ico--warn   { background: var(--color-warning-soft); color: var(--color-warning-text); }
.rpub__ico--danger { background: var(--color-danger-soft);  color: var(--color-danger-text); }
.rpub__ico--info   { background: var(--color-info-soft);    color: var(--color-info-text); }

/* ---- Historie výkazu (zadání výkazů §4.7) ------------------------------- */
.rtl { list-style: none; margin: 0; padding: 0; }
.rtl--compact .rtl__row { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) 0; border-top: 1px solid var(--color-border); }
.rtl--compact .rtl__row:first-child { border-top: 0; }
.rtl__text { min-width: 0; }
.rtl__actor, .rtl__time { white-space: nowrap; }
.is-dim { opacity: .7; }
.rtl__page { display: grid; gap: var(--sp-3); }
.rtl__filters { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.rtl__intro { margin: 0; }
.rtl__day { margin-top: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.rtl__ev { display: flex; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--color-border); }
.rtl__main { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--sp-1); }
.rtl__top { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.rtl__when { text-align: right; white-space: nowrap; }
.rtl__diffs { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.rtl__diff { display: inline-flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); }
.rtl__del { background: var(--color-danger-soft); color: var(--color-danger-text); padding: 0 var(--sp-2); border-radius: var(--radius-sm); }
.rtl__ins { background: var(--color-success-soft); color: var(--color-success-text); padding: 0 var(--sp-2); border-radius: var(--radius-sm); text-decoration: none; }
.rtl__dl { margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--color-surface-2); border-radius: var(--radius-sm); gap: var(--sp-2) var(--sp-5); }
.check-link { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--color-text); text-decoration: none; }
.check-link__box { width: 1.1rem; height: 1.1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface); }
.check-link__box.is-on { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-brand-contrast); }
.ir-opened { margin-left: var(--sp-2); }
@media (max-width: 640px) {
  .rtl--compact .rtl__row { grid-template-columns: auto 1fr; }
  .rtl--compact .rtl__actor { grid-column: 2; }
  .rtl__ev { flex-direction: column; gap: var(--sp-1); }
  .rtl__when { text-align: left; }
}

/* ---- Fakturační evidence výkazu (zadání výkazů §7.7) -------------------- */
.rbill { display: grid; gap: var(--sp-3); }
.rbill__bar { display: grid; gap: var(--sp-1); }
.rbill__progress { width: 100%; height: .5rem; accent-color: var(--color-success); }
.rbill__unbilled summary { cursor: pointer; }
.rbill__list { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
.rbill__pick { display: grid; gap: var(--sp-1); max-height: 14rem; overflow-y: auto; margin-top: var(--sp-2); padding-left: var(--sp-4); }
.rbill__conflict { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-2); background: var(--color-warning-soft); color: var(--color-warning-text); border-radius: var(--radius-sm); }
.rbill__conflict .field { margin-bottom: 0; color: var(--color-text); }
/* Vystavit z výkazu (sjednocená fakturace v0.2 §5) – náhled z plánu v dialogu. */
.rbd-preview__title { font-size: var(--fs-md); margin: var(--sp-4) 0 var(--sp-1); }
.rbd-preview { display: grid; gap: var(--sp-3); min-height: 3rem; }
.rbd-preview[aria-busy="true"] { color: var(--color-text-muted); }
.rbd-preview .table { margin: 0; }
.rbd-preview tfoot th { text-align: right; font-weight: 500; }
.rbd-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; }
.rbd-meta dt { color: var(--color-text-muted); }
.inv-att-missing { align-items: flex-start; }
.inv-att-missing__retry { margin-left: auto; }
.inv-att-missing__retry .btn, .rbd-warn .btn { white-space: nowrap; }
.rbd-meta dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .rbd-meta { grid-template-columns: 1fr; } .rbd-meta dd { margin-bottom: var(--sp-2); } }
.inv-srcbill { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-2); background: var(--color-surface-2); border-radius: var(--radius-sm); }
.inv-srcbill .field { margin-bottom: 0; }

/* ---- Přidat ticket do výkazu (zadání výkazů §5) ------------------------- */
.irt { display: grid; gap: var(--sp-3); }
.irt__tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--color-border); }
.irt__tab { padding: var(--sp-2) var(--sp-3); border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--fs-sm); color: var(--color-text-muted); cursor: pointer; margin-bottom: -1px; }
.irt__tab.is-active { color: var(--color-brand); border-bottom-color: var(--color-brand); font-weight: var(--fw-semibold); }
.irt__pane { display: grid; gap: var(--sp-3); }
.irt__search { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.irt__search .field { margin-bottom: 0; }
.irt__q { flex: 1 1 14rem; }
.irt__period { width: 11rem; }
.irt__list { display: grid; gap: var(--sp-2); max-height: 50vh; overflow-y: auto; }
.irt__res { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.irt__res.is-sel { border-color: var(--color-brand); background: var(--color-brand-soft); }
.irt__res.is-disabled { opacity: .6; cursor: not-allowed; }
.irt__resmain { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--sp-1); }
.irt__entries { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); }
.irt__entry { flex-wrap: wrap; }
.irt__kinds { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---- Přesun, kopie a rozdělení řádků (zadání výkazů §6) ----------------- */
.ir-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); background: var(--color-brand-soft); border-radius: var(--radius-sm); }
.ir-bulkbar__sp { flex: 1 1 auto; }
.ir-row__pick { margin-right: var(--sp-1); }
.irm { display: grid; gap: var(--sp-3); }
.irm__source { padding: var(--sp-3) var(--sp-4); background: var(--color-surface-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); display: grid; gap: var(--sp-1); }
.irm__entries { display: grid; gap: var(--sp-1); }
.irm__targets { display: grid; gap: var(--sp-2); max-height: 40vh; overflow-y: auto; }
.irm__group { margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.irm__opt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer; }
.irm__opt.is-disabled { opacity: .6; cursor: not-allowed; }
.irm__opt:has(input:checked) { border-color: var(--color-brand); background: var(--color-brand-soft); }
.irm__newfields { padding-left: var(--sp-5); }
.irm__box { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.irm__box .field { margin-bottom: 0; }
.irm__cross, .irm__merge { display: grid; gap: var(--sp-2); }
.irm__undohint { flex: 1 1 auto; }

/* ---- B2: nedokončený ticket ve výkazu (zadání výkazů §5.3) ------------- */
.irb__pending { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; }
.irb__pending form { margin-left: auto; }

/* ---- Rozdělit CSP fakturu – období, důvod, panel „proč", kontrola (csp-split-detail §3, §4) ----
   Jen tokeny (S1) – světlý i tmavý režim. Panel = sdílený .drawer (PP.drawer.show). */
.csp-table td { vertical-align: top; }
.csp-table .input.csp-qty { max-width: 6rem; }
.csp-table .input.csp-qty.is-manual { border-color: var(--color-warning); background: var(--color-warning-soft); }
.csp-table tr.is-selected td { background: var(--color-brand-soft); }
.csp-child__cell { padding-left: var(--sp-6); }
.csp-pname { font-weight: var(--fw-medium); }
.csp-period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-subtle); }
.csp-period svg { flex: none; }
.csp-period .badge { font-family: var(--font-sans); }
.csp-why { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--color-text-muted); }
.csp-sep { color: var(--color-border-strong); }
.csp-group-sub { margin-left: var(--sp-6); }
.csp-link, .csp-whylink { border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1); }
.csp-link { color: var(--color-brand-text); }
.csp-link:hover, .csp-whylink:hover span { text-decoration: underline; }
.csp-whycell { margin-top: var(--sp-1); }
.csp-whylink { color: var(--color-text-muted); font-weight: var(--fw-medium); }
.csp-whylink:hover { color: var(--color-brand-text); }
.csp-whylink:focus-visible, .csp-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.csp-rem--ok { color: var(--color-success-text); }
.csp-rem--bad { color: var(--color-danger-text); font-weight: var(--fw-bold); }
.csp-actions { padding: var(--sp-4); gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.csp-small { font-size: var(--fs-xs); margin: 0; }
/* panel */
.csp-bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface-2); }
.csp-bar__seg { display: block; height: 100%; width: 0; transition: width .15s; }
.csp-c0 { background: var(--color-brand); } .csp-c1 { background: var(--color-accent); } .csp-c2 { background: var(--color-success); }
.csp-c3 { background: var(--color-warning); } .csp-c4 { background: var(--color-violet); } .csp-c5 { background: var(--color-danger); }
.csp-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--color-text-muted); }
.csp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--sp-1); vertical-align: -1px; }
.csp-legend__hint { margin-left: auto; }
.csp-res { display: grid; gap: var(--sp-2); }
.csp-res__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.csp-res__row.is-focus { border-color: var(--color-brand); box-shadow: 0 0 0 2px var(--color-brand-soft); }
.csp-res__co { min-width: 0; }
.csp-res__co small { display: block; color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); }
.csp-res__t { font-family: var(--font-mono); color: var(--color-text-muted); min-width: 2.5rem; text-align: right; }
.csp-res__arrow { color: var(--color-text-subtle); font-family: var(--font-mono); }
.csp-res__big { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-md); min-width: 2.5rem; text-align: right; }
.csp-res__big.is-manual { color: var(--color-warning-text); }
.csp-callout { display: grid; gap: 2px; border-left: 3px solid var(--color-warning); background: var(--color-warning-soft); color: var(--color-warning-text); padding: var(--sp-3); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--fs-sm); }
.csp-callout--info { border-left-color: var(--color-accent); background: var(--color-info-soft); color: var(--color-info-text); }
.csp-callout[hidden] { display: none; }
.csp-steps { list-style: none; margin: 0; padding: 0; counter-reset: cspstep; }
.csp-steps li { position: relative; padding: 0 0 var(--sp-3) 2.25rem; font-size: var(--fs-sm); counter-increment: cspstep; }
.csp-steps li::before { content: counter(cspstep); position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-brand-soft); color: var(--color-brand-text); font-size: var(--fs-xs); font-weight: var(--fw-bold); display: grid; place-items: center; }
.csp-steps li:not(:last-child)::after { content: ""; position: absolute; left: .72rem; top: 1.6rem; bottom: .2rem; width: 1px; background: var(--color-border); }
.csp-steps li.is-ok::before { content: "✓"; background: var(--color-success-soft); color: var(--color-success-text); }
.csp-steps li small { display: block; color: var(--color-text-muted); font-size: var(--fs-xs); }
.csp-rule { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.csp-rule > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); cursor: pointer; font-size: var(--fs-sm); }
.csp-rule > summary::-webkit-details-marker { display: none; }
.csp-rule__chev { color: var(--color-text-subtle); transition: transform .15s; }
.csp-rule[open] .csp-rule__chev { transform: rotate(90deg); }
.csp-rule__cnt { font-weight: var(--fw-bold); }
.csp-rule > div { border-top: 1px solid var(--color-border); }
.csp-users { font-size: var(--fs-xs); }
.csp-users th, .csp-users td { padding: 5px var(--sp-3); }
/* krok 4 */
.csp-card-sub { font-weight: var(--fw-regular); font-size: var(--fs-sm); }
.csp-card-foot { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.csp-grand { padding: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.csp-note { margin: 0; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--color-border); background: var(--color-surface-2); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); white-space: pre-wrap; word-break: break-word; }
.csp-note strong { display: block; margin-bottom: var(--sp-1); font-family: var(--font-sans); color: var(--color-text); }
.csp-mini { border-collapse: collapse; margin-top: var(--sp-2); font-size: var(--fs-xs); }
.csp-mini th, .csp-mini td { padding: 3px var(--sp-3) 3px 0; text-align: left; vertical-align: top; }
.flash.csp-resend { display: block; }
.flash.csp-resend > strong { display: block; margin-bottom: var(--sp-1); }
.csp-confirm { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); font-weight: var(--fw-semibold); }
.csp-recip { padding: var(--sp-2) var(--sp-4); }
.csp-recip .kv__v { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); justify-content: flex-end; align-items: center; }
@media (max-width: 640px) {
  .csp-res__row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .csp-res__arrow { display: none; }
  .csp-legend__hint { margin-left: 0; }
  .csp-recip .kv { flex-direction: column; }
  .csp-recip .kv__v { justify-content: flex-start; text-align: left; }
}

/* Akce v řádku tabulky (formuláře vedle sebe, bez zalamování popisků). Pod
   640 px (table--stack) se skládají pod sebe a nepřetékají. */
.row-actions { display: inline-flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.row-actions form { margin: 0; }
@media (max-width: 640px) {
  .table--stack .row-actions { flex-direction: column; align-items: stretch; max-width: 100%; }
}

/* Audit M365: rozbalovací legenda stavů (kontroly, nálezy). Sbalená = textové
   tlačítko bez rámečku, rozbalená = plochý panel (v kartě od okraje k okraji). */
.audit-legend { margin: var(--sp-3) 0; border: 0; background: none; }
.audit-legend__sum {
  display: inline-flex; align-items: center; gap: var(--sp-1); cursor: pointer;
  list-style: none; color: var(--color-brand-text); font-size: var(--fs-sm);
  font-weight: var(--fw-medium); padding: var(--sp-1) 0;
}
.audit-legend__sum::-webkit-details-marker { display: none; }
.audit-legend__sum::after {
  content: ''; width: 6px; height: 6px; margin-left: var(--sp-1);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
.audit-legend[open] > .audit-legend__sum::after { transform: rotate(-135deg); }
.audit-legend__sum:hover { text-decoration: underline; }
.audit-legend__sum:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: var(--radius-sm); }
.audit-legend__panel { background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-5); margin-top: var(--sp-2); }
.audit-legend .table-wrap { margin: 0; }
.audit-legend .table { border: 0; background: none; }
.audit-legend .table thead th { font-size: var(--fs-xs); color: var(--color-text-muted); background: none; text-transform: none; }
.audit-legend .table tbody tr, .audit-legend .table tbody tr:nth-child(even) { background: none; }
.audit-legend .table th:first-child, .audit-legend .table td:first-child { width: 14rem; }
.audit-legend .table td:last-child { color: var(--color-text-muted); }
/* v kartě (pracovní plocha kontrol): od okraje k okraji, oddělené čarou */
.card > .audit-legend { margin: 0; border-bottom: 1px solid var(--color-border); }
.card > .audit-legend > .audit-legend__sum { margin: var(--sp-2) var(--sp-5); }
.card > .audit-legend .audit-legend__panel { border-radius: 0; margin-top: 0; }
@media (max-width: 640px) {
  .audit-legend .table th:first-child, .audit-legend .table td:first-child { width: auto; }
}

/* Záhlaví stránky na úzkém displeji: tlačítka s `white-space: nowrap` se do
   jednoho řádku s nadpisem nevejdou, proto se akce zalomí pod nadpis. */
@media (max-width: 640px) {
  .page-head { flex-wrap: wrap; align-items: flex-start; }
  .page-head__aside { justify-content: flex-start; max-width: 100%; }
}

/* ===== Průvodce slučováním klientů (issue #111) ===== */
.merge-steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-5); padding: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.merge-steps__item a, .merge-steps__item > span { display: inline-flex; align-items: center; gap: var(--sp-2); color: inherit; text-decoration: none; }
.merge-steps__no { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid var(--color-border); font-weight: var(--fw-semibold); }
.merge-steps__item.is-current { color: var(--color-text); font-weight: var(--fw-semibold); }
.merge-steps__item.is-current .merge-steps__no { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-brand-contrast); }
.merge-steps__item.is-done .merge-steps__no { background: var(--color-success-soft); color: var(--color-success-text); }
.merge-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.merge-card { cursor: pointer; margin: 0; }
.merge-card.is-selected, .merge-card:has(input:checked) { border-color: var(--color-brand); box-shadow: 0 0 0 1px var(--color-brand); }
.merge-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.merge-dl dt { color: var(--color-text-muted); }
.merge-dl dd { margin: 0; overflow-wrap: anywhere; }
.merge-val { overflow-wrap: anywhere; }
.merge-opt { display: inline-flex; align-items: center; gap: var(--sp-2); margin-right: var(--sp-4); }
.merge-cat { margin-bottom: var(--sp-4); }
.merge-summary { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.merge-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.merge-actions__spacer { flex: 1; }
@media (max-width: 720px) {
  .merge-cards { grid-template-columns: 1fr; }
}

/* ---- Fakturace klienta F2 (#113): řádky s dědičností, texty + panel symbolů, lepící pruh ---- */
.inv-issuer { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-5); font-weight: var(--fw-medium); }
/* Informační lišty nad formulářem: stejná mezera jako mezi kartami (.card). */
.inv-notice { margin: 0 0 var(--sp-5); }
.inv-csp-hint { margin-top: 0; }
.inv-irows { display: grid; gap: var(--sp-3); }
.inv-irow { display: grid; grid-template-columns: 200px minmax(0, 320px) minmax(160px, 1fr);
            gap: var(--sp-3); align-items: start; }
.inv-irow__ctl .input, .inv-irow__ctl .select { width: 100%; }
.inv-irow__state .badge { white-space: normal; text-align: left; }
.inv-irow__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); padding-top: 8px; }
.inv-irow--plain { grid-template-columns: 200px minmax(0, 1fr); }
.inv-irow__ctl .field__hint { margin-top: var(--sp-1); }
.inv-irow__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding-top: 6px; }
.inv-irow .inv-st-set { display: none; align-items: center; gap: var(--sp-2); }
.inv-irow.is-set .inv-st-set { display: inline-flex; }
.inv-irow.is-set .inv-st-inh { display: none; }
.inv-st-reset { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.inv-txt { margin-bottom: var(--sp-4); }
.inv-txt .seg { margin: var(--sp-1) 0 var(--sp-2); }
.seg--inv .seg__opt { position: relative; }
.seg--inv .seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg--inv .seg__opt:has(input:focus-visible) { outline: 2px solid var(--color-brand); outline-offset: -2px; }
.seg--inv .seg__opt:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.inv-texts { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-4); align-items: start; margin-bottom: var(--sp-4); }
.inv-texts__card { margin-bottom: 0; }
.ph-panel { position: sticky; top: var(--sp-4); border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px);
            background: var(--color-surface); padding: var(--sp-3); font-size: var(--fs-sm); }
.ph-panel__title { margin: 0 0 var(--sp-2); font-size: var(--fs-md, 1rem); }
.ph-panel__target { margin: 0 0 var(--sp-2); }
.inv-texts__card .card__body > .field__hint:first-child { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4); line-height: 1.5; }
.inv-texts__card .card__body > .field__hint:first-child svg { flex: none; margin-top: 2px; }
@media (max-width: 640px) {
  .inv-irow, .inv-irow--plain { grid-template-columns: 1fr; gap: var(--sp-1); }
}
.ph-panel__list { grid-template-columns: 1fr; }
.inv-legacy { margin-top: var(--sp-3); }
.inv-legacy summary { cursor: pointer; color: var(--color-brand-text); width: fit-content; }
.inv-legacy__list { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: var(--sp-2) 0 0; }
.inv-legacy__list dt { color: var(--color-text-muted); }
.inv-legacy__list dd { margin: 0; }
.form-actions--sticky { position: sticky; bottom: 0; z-index: 5; justify-content: flex-end; margin-top: var(--sp-4);
                        padding: var(--sp-3) var(--sp-4); background: var(--color-surface); border-top: 1px solid var(--color-border); }
@media (max-width: 900px) {
  .inv-texts { grid-template-columns: 1fr; }
  .ph-panel { position: static; }
  .inv-irow__label { padding-top: 0; }
  .inv-irow__state { padding-top: 0; }
}

/* Stav obchodního rejstříku na detailu klienta (issue #116) */
.regrow { margin-bottom: 16px; padding: 10px 14px; border: 1px solid var(--color-border, #dcdfe4); border-radius: 8px; background: var(--color-surface, #fff); }
.regrow__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.regrow__dot { width: 10px; height: 10px; border-radius: 50%; background: #8a8f98; flex: none; }
.regrow__dot--ok { background: var(--color-success); }
.regrow__dot--changed { background: #e8830c; }
.regrow__dot--invalid { background: var(--color-danger); }
.regrow__diff { margin-top: 10px; }
.regrow__actions { display: flex; gap: 8px; margin-top: 8px; }
.regrow__msg { margin-top: 8px; color: var(--color-danger); }

/* Přehled klienta (#118): dlaždice auto-fit, karty ve 2 sloupcích, na mobilu pod sebou. */
.ov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
@media (max-width: 899px) { .ov-grid { grid-template-columns: 1fr; } }
.ov-num { font-variant-numeric: tabular-nums; }
.ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.ov-dl { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.ov-dl > div { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.ov-dl dt { min-width: 11rem; color: var(--color-text-muted); font-size: var(--fs-sm); }
.ov-dl dd { margin: 0; }

/* Propojení klienta (#115): karty systémů po dvou od 1100 px, akce v patičce karty dole. */
.lnk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: stretch; margin-bottom: var(--sp-5); }
@media (min-width: 1100px) { .lnk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lnk-grid > .card { display: flex; flex-direction: column; margin-bottom: 0; }
.lnk-grid > .card > .card__body { flex: 1 1 auto; }
.lnk-grid .kv__k { flex: none; }
.lnk-grid .kv__v { min-width: 0; }
.lnk-grid .kv__v.mono { overflow-wrap: anywhere; }
.lnk-foot { justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: auto; padding: var(--sp-3) var(--sp-5); }
.lnk-foot form { margin: 0; }