/* =====================================================================
   Application Hub – komponenty a layout
   Pravidla:
   - hodnoty jen z tokens.css (var(--…)); nové barvy/rozměry nejdřív do tokenů,
   - třídy jsou ploché (BEM-like): .blok, .blok__prvek, .blok--varianta,
   - stavy přes atributy/aria: [aria-current], [aria-invalid], [disabled],
   - žádný inline style ani inline <script> (CSP).
   ===================================================================== */

/* ---------- Reset a základ ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--leading-tight); font-weight: var(--weight-semibold); }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
p { margin: 0; }
p + p { margin-top: var(--space-3); }

a { color: var(--color-link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

img, svg { display: block; max-width: 100%; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary); color: var(--color-on-primary);
  border-radius: var(--radius-sm); z-index: 100;
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Logo (světlá/tmavá varianta) ---------- */
.logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.logo__img { height: 22px; width: auto; }
.logo__img--dark { display: none; }
.logo__product {
  padding-left: var(--space-3);
  border-left: var(--border-width) solid var(--color-border-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo__img--light { display: none; }
  :root:not([data-theme="light"]) .logo__img--dark { display: block; }
}
:root[data-theme="dark"] .logo__img--light { display: none; }
:root[data-theme="dark"] .logo__img--dark { display: block; }

/* ---------- Hlavička aplikace ---------- */
.app-header {
  position: sticky; top: 0; z-index: 10;
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}
.app-header__inner {
  max-width: var(--layout-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex; align-items: center; gap: var(--space-6);
}
.app-header__nav { display: flex; gap: var(--space-1); margin-left: var(--space-4); }
.app-header__spacer { flex: 1; }

.nav-link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
}
.nav-link:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.nav-link[aria-current="page"] { color: var(--color-primary); background: var(--color-primary-soft); }

/* Uživatelské menu (details/summary – bez JS) */
.user-menu { position: relative; }
.user-menu > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: var(--color-surface-sunken); }
.user-menu__who { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.user-menu__name { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.user-menu__org { font-size: var(--text-xs); color: var(--color-text-muted); }
.user-menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--space-2));
  min-width: 260px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.user-menu__meta { padding: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); margin-bottom: var(--space-2); }
.user-menu__item {
  display: block; width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-text);
  font: inherit; font-size: var(--text-sm); text-align: left; text-decoration: none; cursor: pointer;
}
.user-menu__item:hover { background: var(--color-surface-sunken); }
/* Hlavní navigace v uživatelském menu – jen na úzkých displejích, kde je .app-header__nav skrytá */
.user-menu__nav { display: none; flex-direction: column; padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); }
.user-menu__nav .user-menu__item { text-decoration: none; color: inherit; }
.user-menu__nav .user-menu__item[aria-current="page"] { font-weight: var(--weight-medium); color: var(--color-primary); }

.avatar {
  width: 36px; height: 36px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft); color: var(--color-primary);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }

/* ---------- Layout stránky ---------- */
.page { max-width: var(--layout-max); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); }
.page--narrow { max-width: var(--layout-narrow); }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); flex-wrap: wrap; }
.page-header__title { display: flex; flex-direction: column; gap: var(--space-2); }
.page-header__lead { color: var(--color-text-muted); max-width: 60ch; }
.page-header__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.breadcrumbs { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-link); text-decoration: underline; }
.breadcrumbs__sep { color: var(--color-text-subtle); }

.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.stack--sm { gap: var(--space-3); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; }

.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }

/* ---------- Karty ---------- */
.card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}
.card__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.card__subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.card__body { padding: var(--space-6); }
.card__body--flush { padding: 0; }
.card__footer {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-surface-muted);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ---------- Tlačítka ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--primary:active { background: var(--color-primary-active); }
.btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-surface-sunken); }
.btn--ghost { background: transparent; color: var(--color-link); }
.btn--ghost:hover { background: var(--color-primary-soft); }
.btn--danger { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger-soft); }
.btn--lg { min-height: 48px; padding: var(--space-3) var(--space-6); font-size: var(--text-md); }
.btn--sm { min-height: 32px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
/* Tlačítko, které zobrazí až JS (např. „Kopírovat“) – atribut hidden musí přebít display: inline-flex. */
.btn[hidden] { display: none; }

/* Přihlášení účtem Microsoft – dle brand guidelines Microsoftu (logo 4 čtverce, neutrální tlačítko) */
.btn--microsoft {
  background: var(--color-surface); color: var(--color-text);
  border-color: var(--color-border-strong);
  justify-content: flex-start; gap: var(--space-3);
}
.btn--microsoft:hover { background: var(--color-surface-sunken); }
.btn--microsoft .ms-logo { width: 20px; height: 20px; }

/* ---------- Formuláře ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field + .field { margin-top: var(--space-5); }
.grid-2 > .field + .field, .grid-3 > .field + .field { margin-top: 0; }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.field__error { font-size: var(--text-xs); color: var(--color-danger); font-weight: var(--weight-medium); }

.input, .select, .textarea {
  width: 100%;
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font: inherit; font-size: var(--text-md);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.textarea { min-height: 120px; resize: vertical; line-height: var(--leading-normal); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-subtle); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 25%, transparent);
}
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.input[readonly] { background: var(--color-surface-sunken); color: var(--color-text-muted); }

fieldset.field { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: var(--space-2); }
.checkbox { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--color-primary); margin: 0; }

/* Kód z e-mailu – 6 číslic v jednom poli */
.otp-input {
  width: 100%;
  min-height: 64px;
  padding: var(--space-3);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.otp-input:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 25%, transparent); }

/* Pole s hodnotou ke zkopírování (admin consent odkaz) */
.copy-field { display: flex; gap: var(--space-2); }
.copy-field .input { font-family: var(--font-mono); font-size: var(--text-sm); }

.divider {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-6) 0;
  font-size: var(--text-xs); color: var(--color-text-subtle);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* ---------- Štítky stavů a rolí ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  line-height: 1.6; white-space: nowrap;
  background: var(--color-surface-sunken); color: var(--color-text-muted);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.badge--plain::before { display: none; }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--info { background: var(--color-info-soft); color: var(--color-info); }

.role-chip {
  display: inline-flex; align-items: center;
  padding: 2px var(--space-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-text);
  background: var(--color-surface);
  white-space: nowrap;
}
.role-chip--admin { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }

.id-type { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }

/* ---------- Upozornění ---------- */
.alert {
  display: flex; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  font-size: var(--text-sm);
}
.alert__icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert__title { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.alert--info { background: var(--color-info-soft); color: var(--color-text); border-color: color-mix(in srgb, var(--color-info) 30%, transparent); }
.alert--info .alert__icon { color: var(--color-info); }
.alert--success { background: var(--color-success-soft); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.alert--success .alert__icon { color: var(--color-success); }
.alert--warning { background: var(--color-warning-soft); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.alert--warning .alert__icon { color: var(--color-warning); }
.alert--danger { background: var(--color-danger-soft); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); }
.alert--danger .alert__icon { color: var(--color-danger); }

/* ---------- Dlaždice aplikací (rozcestník) ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-6); }
.tile {
  --tile-accent: var(--accent-1);
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 190px;
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none;
  overflow: hidden;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.tile::after {
  /* kulička z loga jako dekorace */
  content: ""; position: absolute; right: -28px; top: -28px;
  width: 96px; height: 96px; border-radius: var(--radius-full);
  background: var(--tile-accent); opacity: 0.12;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--tile-accent) 50%, var(--color-border)); }
.tile__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--tile-accent) 14%, transparent);
  color: var(--tile-accent);
}
.tile__icon svg { width: 24px; height: 24px; }
.tile__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.tile__desc { font-size: var(--text-sm); color: var(--color-text-muted); flex: 1; }
/* flex-wrap: údaje dlaždice (výsledek a datum testu) se při nedostatku místa přesunou na další řádek celé. */
.tile__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tile--1 { --tile-accent: var(--accent-1); }
.tile--2 { --tile-accent: var(--accent-2); }
.tile--3 { --tile-accent: var(--accent-3); }
.tile--4 { --tile-accent: var(--accent-6); }
.tile--disabled { opacity: 0.55; pointer-events: none; }

/* ---------- Tabulky ---------- */
/* position: relative – absolutně pozicované prvky (.visually-hidden v záhlaví) zůstanou ve scroll kontejneru
   a nerozšíří stránku na úzkém displeji. */
.table-wrap { overflow-x: auto; position: relative; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  text-align: left; font-weight: var(--weight-semibold);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--color-text-subtle);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-surface-muted);
  white-space: nowrap;
}
.table td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--color-surface-muted); }
.table__num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.table__actions { text-align: right; white-space: nowrap; }
.cell-person { display: flex; align-items: center; gap: var(--space-3); }
.cell-person__name { font-weight: var(--weight-medium); }
.cell-person__sub { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- Toolbar nad tabulkou ---------- */
.toolbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: var(--border-width) solid var(--color-border); flex-wrap: wrap; }
.toolbar .input { max-width: 320px; min-height: 36px; }
.toolbar .select { max-width: 220px; min-height: 36px; }

/* ---------- Záložky (odkazy, bez JS) ---------- */
.tabs { display: flex; gap: var(--space-1); border-bottom: var(--border-width) solid var(--color-border); margin-bottom: var(--space-6); overflow-x: auto; scrollbar-width: none; }
.tabs__item {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted); text-decoration: none;
  font-weight: var(--weight-medium); font-size: var(--text-sm);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs__item:hover { color: var(--color-text); }
.tabs__item[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
/* Záložka, která zatím není k dispozici (span s aria-disabled, ne odkaz). */
.tabs__item[aria-disabled="true"] { color: var(--color-text-subtle); cursor: not-allowed; }
.tabs__item[aria-disabled="true"]:hover { color: var(--color-text-subtle); }
.tabs__note { font-size: var(--text-xs); font-weight: var(--weight-regular); margin-left: var(--space-1); }

/* ---------- Statistiky ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.stat { padding: var(--space-5); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); }
.stat__label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: var(--weight-semibold); }
.stat__value { font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: 1.1; margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.stat__trend { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

/* Jednoduchý pruhový ukazatel (bez knihovny) */
.bar { height: 8px; border-radius: var(--radius-full); background: var(--color-surface-sunken); overflow: hidden; }
.bar__fill { height: 100%; border-radius: inherit; background: var(--color-primary); }
.bar__fill--p10 { width: 10%; } .bar__fill--p20 { width: 20%; } .bar__fill--p30 { width: 30%; }
.bar__fill--p40 { width: 40%; } .bar__fill--p50 { width: 50%; } .bar__fill--p60 { width: 60%; }
.bar__fill--p70 { width: 70%; } .bar__fill--p80 { width: 80%; } .bar__fill--p90 { width: 90%; }
.bar__fill--p100 { width: 100%; }

/* ---------- Grafy (inline SVG, specifikace 12.4) ----------
   Barva řady jen třídou .chart-series-N (hodnoty --chart-N v tokens.css, světlý i tmavý režim). Pevné přiřazení
   entita → barva: Entra 1, MSA 2, E-mail 3; org 1, directory 2, notes 3, isolation 4. V SVG žádné style ani fill. */
.chart-series-1 { --series: var(--chart-1); }
.chart-series-2 { --series: var(--chart-2); }
.chart-series-3 { --series: var(--chart-3); }
.chart-series-4 { --series: var(--chart-4); }

.chart { margin: 0; min-width: 0; container-type: inline-size; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid line { stroke: var(--color-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__text text { fill: var(--color-text-muted); font-family: var(--font-sans); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.chart__text .chart__label { fill: var(--color-text); }
/* SVG se zmenší / zvětší na šířku kontejneru (viewBox 560) – písmo ve viewBoxu se upraví, aby na obrazovce
   zůstalo kolem 11–13 px. Geometrie (zředění popisků, okraje) počítá s největší hodnotou. */
@container (max-width: 359px) { .chart__text text { font-size: 19px; } }
@container (min-width: 360px) and (max-width: 459px) { .chart__text text { font-size: 15px; } }
@container (min-width: 620px) and (max-width: 799px) { .chart__text text { font-size: 11px; } }
@container (min-width: 800px) { .chart__text text { font-size: 8.5px; } }
.chart__bar { fill: var(--series); }
.chart__line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart__point { fill: var(--series); stroke: var(--color-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart__hover { fill: var(--series); opacity: 0; }
.chart__hover:hover { opacity: 1; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0 0 var(--space-3); padding: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.chart-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-legend__swatch { width: var(--space-3); height: var(--space-3); border-radius: calc(var(--radius-sm) / 2); background: var(--series); flex: none; }
.chart__table { margin-top: var(--space-4); }
.chart__table .table-wrap { max-height: calc(var(--space-16) * 6); overflow-y: auto; }
.chart__empty { padding: var(--space-8) var(--space-4); }
.chart-card { min-width: 0; }
/* Přepínač období (odkazy, bez JS) */
.period-switch { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--color-surface-sunken); border-radius: var(--radius-md); }
.period-switch__item { padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); text-decoration: none; }
.period-switch__item:hover { color: var(--color-text); }
.period-switch__item[aria-current="page"] { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }

/* Nadpis skupiny karet (technický monitoring: Aplikace · App Service · SQL) */
.section-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-muted); }

/* ---------- Hledání v technickém logu ---------- */
.log-message { min-width: 18rem; overflow-wrap: anywhere; }
.log-detail { margin-top: var(--space-1); font-size: var(--text-xs); }
.log-detail > summary { cursor: pointer; color: var(--color-link); }
.log-detail__json {
  margin: var(--space-2) 0 0; padding: var(--space-3);
  max-height: calc(var(--space-16) * 5); overflow: auto;
  background: var(--color-surface-sunken); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------- Klíč–hodnota ---------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); font-size: var(--text-sm); margin: 0; }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; font-weight: var(--weight-medium); word-break: break-all; }

/* ---------- Kroky (onboarding organizace) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps__item { position: relative; padding-top: var(--space-8); font-size: var(--text-sm); color: var(--color-text-muted); counter-increment: step; }
.steps__item::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken); color: var(--color-text-muted);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.steps__item::after { content: ""; position: absolute; top: 11px; left: 32px; right: var(--space-2); height: 2px; background: var(--color-border); }
.steps__item:last-child::after { display: none; }
.steps__item--done { color: var(--color-text); }
.steps__item--done::before { content: "✓"; background: var(--color-success); color: var(--color-text-inverse); }
.steps__item--done::after { background: var(--color-success); }
.steps__item--current { color: var(--color-text); font-weight: var(--weight-semibold); }
.steps__item--current::before { background: var(--color-primary); color: var(--color-on-primary); }

/* ---------- Výsledky testů izolace ---------- */
.checks { list-style: none; margin: 0; padding: 0; }
.check { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-4) var(--space-6); border-bottom: var(--border-width) solid var(--color-border); }
.check:last-child { border-bottom: 0; }
.check__icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.check--pass .check__icon { background: var(--color-success-soft); color: var(--color-success); }
.check--fail .check__icon { background: var(--color-danger-soft); color: var(--color-danger); }
/* Test, který se nepočítá (upozornění) nebo se přeskočil. */
.check--warn .check__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.check--skipped .check__icon { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.check__title { font-weight: var(--weight-semibold); }
.check__detail { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* ---------- Seznam poznámek ---------- */
.note { padding: var(--space-5) var(--space-6); border-bottom: var(--border-width) solid var(--color-border); }
.note:last-child { border-bottom: 0; }
.note__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
/* Prostý text poznámky: řádky zachované CSS (ne převodem na HTML), dlouhá slova se zalomí. */
.note__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
/* Celé ID poznámky (pro test izolace) – čitelné a označitelné i bez JS. */
.note__id { user-select: all; overflow-wrap: anywhere; }
.note__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* ---------- Prázdný stav ---------- */
.empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--color-text-muted); }
.empty__art { width: 72px; height: 72px; margin: 0 auto var(--space-4); opacity: 0.9; }
.empty__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); margin-bottom: var(--space-2); }

/* ---------- Přihlášení a veřejné stránky (dělený layout) ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.auth__brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-10) var(--space-12);
  background: var(--color-hero-bg); color: var(--color-hero-text);
}
.auth__brand .logo__img { height: 28px; }
.auth__brand .logo__product { color: rgba(255, 255, 255, 0.7); border-left-color: rgba(255, 255, 255, 0.3); }
.auth__claim { position: relative; z-index: 1; max-width: 420px; margin-top: auto; margin-bottom: var(--space-12); }
.auth__claim h1 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); margin-bottom: var(--space-4); }
.auth__claim p { color: rgba(255, 255, 255, 0.75); font-size: var(--text-lg); }
.auth__foot { position: relative; z-index: 1; margin-top: 0; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.55); }

/* Dekorace – kuličky z loga */
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubbles span { position: absolute; border-radius: var(--radius-full); }
.bubbles span:nth-child(1) { width: 200px; height: 200px; right: -50px; top: 9%; background: var(--brand-blue); opacity: 0.85; }
.bubbles span:nth-child(2) { width: 96px; height: 96px; right: 170px; top: 24%; background: var(--brand-green); opacity: 0.85; }
.bubbles span:nth-child(3) { width: 64px; height: 64px; right: 120px; top: 34%; background: var(--brand-yellow); opacity: 0.9; }
.bubbles span:nth-child(4) { width: 40px; height: 40px; right: 270px; top: 20%; background: var(--brand-orange); opacity: 0.9; }
.bubbles span:nth-child(5) { width: 24px; height: 24px; right: 320px; top: 15%; background: var(--brand-red); opacity: 0.9; }
.bubbles span:nth-child(6) { width: 56px; height: 56px; right: 150px; top: 6%; background: var(--brand-navy); opacity: 0.9; }

.auth__main { display: flex; align-items: center; justify-content: center; padding: var(--space-10) var(--space-6); background: var(--color-bg); }
.auth__panel { width: 100%; max-width: 420px; }
.auth__panel h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.auth__panel .lead { color: var(--color-text-muted); margin-bottom: var(--space-8); }
.auth__help { margin-top: var(--space-8); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Samostatná zpráva (chyby, potvrzení consentu) */
.message-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-10) var(--space-6); text-align: center; }
.message-page__logo { margin-bottom: var(--space-10); }
.message-page__card { max-width: 520px; padding: var(--space-10); }
.message-page__icon { width: 64px; height: 64px; margin: 0 auto var(--space-6); display: grid; place-items: center; border-radius: var(--radius-full); }
.message-page__icon svg { width: 32px; height: 32px; }
.message-page__icon--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.message-page__icon--success { background: var(--color-success-soft); color: var(--color-success); }
.message-page__icon--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.message-page h1 { margin-bottom: var(--space-3); }
.message-page p { color: var(--color-text-muted); }
.message-page__actions { margin-top: var(--space-8); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.message-page__ref { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ---------- Rozbalovací blok (details/summary) ---------- */
.disclosure { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.disclosure > summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-size: var(--text-sm); list-style-position: inside; }
.disclosure > summary:hover { background: var(--color-surface-muted); border-radius: var(--radius-md); }
.disclosure__body { padding: 0 var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------- Pomocné třídy (místo inline stylů – CSP) ---------- */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }

/* ---------- Patička ---------- */
.app-footer { max-width: var(--layout-max); margin: 0 auto; padding: var(--space-6); font-size: var(--text-xs); color: var(--color-text-subtle); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

/* ---------- Responzivita ---------- */
@media (max-width: 960px) {
  .grid-sidebar, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth__brand { min-height: 220px; padding: var(--space-8) var(--space-6); }
  .auth__claim h1 { font-size: var(--text-2xl); }
  .bubbles span { display: none; }
  .bubbles span:nth-child(1) { display: block; width: 180px; height: 180px; right: -70px; top: -60px; opacity: 0.35; }
  .auth__claim { margin-top: var(--space-8); margin-bottom: var(--space-6); }
}
@media (max-width: 720px) {
  .app-header__inner { padding: 0 var(--space-4); gap: var(--space-3); }
  .app-header__nav, .logo__product, .user-menu__who { display: none; }
  .user-menu__nav { display: flex; }
  .page { padding: var(--space-6) var(--space-4) var(--space-12); }
  .steps { grid-template-columns: 1fr 1fr; row-gap: var(--space-6); }
  .steps__item:nth-child(2)::after { display: none; }
  .kv { grid-template-columns: 1fr; gap: var(--space-1); }
  .kv dd { margin-bottom: var(--space-3); }
  .tabs__item { padding: var(--space-3) var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}