/* Atoms — Monospace technical dashboard (viz design.md).
   JetBrains Mono, hairlines, 0px rohy, žádné stíny, modré odkazy. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-canvas);
  color: var(--color-body);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* iOS Safari text autosize off (mono karta /zdroj jinak ~2× větší). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Pozn.: NEpoužívat overflow-x: hidden — na iOS blokuje scroll v .table-wrap. */
}

/* ── Headings (hierarchie velikostí + váhou, jedna rodina) ──────────── */
h1, h2, h3 {
  font-family: var(--font-mono);
  color: var(--color-ink);
  margin: 0 0 var(--spacing-12);
}
h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: var(--fw-bold);          /* 700 */
  margin-bottom: var(--spacing-24);
}
h2 {
  font-size: var(--text-h2);            /* 24px */
  line-height: var(--leading-h2);
  font-weight: var(--fw-semibold);      /* 600 */
  color: var(--color-body);
  margin: var(--spacing-32) 0 var(--spacing-12);
}
h3 {
  font-size: var(--text-h3);            /* 20px */
  line-height: var(--leading-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-body);
  margin: var(--spacing-16) 0 var(--spacing-8);
}

p { margin: 0 0 var(--spacing-8); }

/* ── Links — electric blue + vždy underline (WCAG 1.4.1) ────────────── */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}
a:active { opacity: 0.7; }

/* ── Mono utility (vše už mono; ponecháno pro tnum) ────────────────── */
code, .mono, pre {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
}
.num { font-variant-numeric: tabular-nums; }

pre { margin: 0; }

/* ── Material Symbols Sharp — monochrome (Body šedá) ───────────────── */
.material-symbols-sharp {
  font-family: 'Material Symbols Sharp';
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  color: var(--color-body);
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
  vertical-align: middle;
}
.material-symbols-sharp.icon-sm { font-size: 16px; }
.material-symbols-sharp.icon-lg { font-size: 24px; }

/* ── Global focus ring — 2px Ink outline, 2px offset ───────────────── */
:focus-visible {
  outline: var(--border-emphasis) solid var(--color-ink);
  outline-offset: var(--focus-offset);
}

/* ── Buttons ───────────────────────────────────────────────────────── */

/* Default = ghost (hairline, transparent, 0 rohů, meta) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-6);
  padding: var(--spacing-8) var(--spacing-12);
  min-height: 32px;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--leading-body);
  font-weight: var(--fw-medium);
  background: transparent;
  color: var(--color-body);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-none);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.btn:hover { color: var(--color-ink); border-color: var(--color-ink); }
.btn[disabled], .btn:disabled { opacity: 0.45; cursor: default; }

/* Primary CTA = graphite fill */
.btn--primary {
  background: var(--color-graphite);
  color: var(--color-canvas);
  border-color: var(--color-graphite);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  padding: var(--spacing-12) var(--spacing-24);
  min-height: 40px;
}
.btn--primary:hover { background: var(--color-graphite); border-color: var(--color-graphite); opacity: 0.9; color: var(--color-canvas); }
.btn--primary:disabled { background: var(--color-body); border-color: var(--color-body); opacity: 1; color: var(--color-canvas); }

/* Danger = ghost s red hairline + ink text (slovo nese význam, ne barva) */
.btn--danger {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-callout-red);
  font-size: var(--text-body);
  padding: var(--spacing-12) var(--spacing-24);
  min-height: 40px;
}
.btn--danger:hover { background: var(--color-badge-failed); color: var(--color-ink); border-color: var(--color-callout-red); }

/* Ghost = explicitní (default už ghost je) */
.btn--ghost {
  background: transparent;
  color: var(--color-body);
}

/* Small variant */
.btn--sm {
  min-height: 28px;
  padding: var(--spacing-4) var(--spacing-12);
  font-size: var(--text-fine);
  line-height: var(--leading-caption);
}

/* ── Split button group (segmented) ────────────────────────────────── */
.btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-none);
  overflow: hidden;
  background: var(--color-canvas);
  max-width: 100%;
}
.btn-group .btn {
  border-radius: 0;
  border: none;
  border-right: var(--border-hairline) solid var(--color-border-hairline);
  background: var(--color-canvas);
  color: var(--color-body);
  min-height: 30px;
}
.btn-group .btn:last-child { border-right: none; }
.btn-group .btn:hover { background: var(--color-hover); color: var(--color-ink); }
.btn-group .btn--active {
  background: var(--color-graphite);
  color: var(--color-canvas);
}
.btn-group .btn--active:hover { background: var(--color-graphite); color: var(--color-canvas); }

/* ── Inputs ────────────────────────────────────────────────────────── */
.input, .select, textarea {
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  min-height: 36px;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  background: var(--color-canvas);
  color: var(--color-ink);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-none);
}
.input:focus, .select:focus, textarea:focus {
  outline: var(--border-emphasis) solid var(--color-ink);
  outline-offset: var(--focus-offset);
  border-color: var(--color-border-hairline);
}
.input::placeholder { color: var(--color-tertiary); }

/* Select — vlastní chevron (Body stroke #414141), native skryté */
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23414141' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-12) center;
  padding-right: 36px;
  cursor: pointer;
}

label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--leading-body);
  font-weight: var(--fw-medium);
  margin-bottom: var(--spacing-6);
  color: var(--color-body);
}

/* ── Badges (jediný zaoblený prvek = pill) ─────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-2) 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--leading-caption);
  font-weight: var(--fw-medium);
  background: var(--color-badge-neutral);
  color: var(--color-ink);
  border: var(--border-hairline) solid rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}
.badge--neutral  { background: var(--color-badge-neutral); }
.badge--success  { background: var(--color-badge-success); color: var(--color-ink); }
.badge--degraded { background: var(--color-badge-degraded); color: var(--color-ink); }
.badge--running  { background: var(--color-badge-running);  color: var(--color-ink); }
.badge--danger   { background: var(--color-badge-failed);   color: var(--color-ink); }
.badge--outline  { background: transparent; color: var(--color-ink); border-color: var(--color-light-ash); }
/* admin/inverse → neutral tint (žádný dark badge v monospace) */
.badge--inverse  { background: var(--color-badge-neutral); color: var(--color-ink); }
.badge--admin    { background: var(--color-badge-running); color: var(--color-ink); }

/* ── StatusDot — malý čtverec (0 rohů), sémantický fill ────────────── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-none);
  background: var(--color-tertiary);
  flex-shrink: 0;
}
.status-dot--success { background: var(--color-success); }
.status-dot--danger  { background: var(--color-callout-red); }
.status-dot--warning { background: var(--color-warning); }

/* ── Card — hairline, 0 rohů, BEZ stínu ────────────────────────────── */
.card {
  background: var(--color-canvas);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-none);
  padding: var(--card-padding);
}
/* Flush varianta — bez paddingu (pro code-block s vlastním layoutem) */
.card--flush { padding: 0; }
/* Lišta uvnitř flush karty (meta hlavička nad code-blokem) */
.card__bar {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-8);
  flex-wrap: wrap;
  padding: var(--spacing-8) var(--spacing-12);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
  font-size: var(--text-caption);
  color: var(--color-tertiary);
}
/* Code/JSON blok — wrappuje, mono, fine */
.code-block {
  margin: 0;
  padding: var(--spacing-12);
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
.card__title {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--leading-caption);
  font-weight: var(--fw-medium);
  color: var(--color-tertiary);
  margin: 0 0 var(--spacing-8);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  flex-wrap: wrap;
}
.card__title .material-symbols-sharp {
  font-size: 16px;
  color: var(--color-body);
  flex-shrink: 0;
}
.card__value {
  font-family: var(--font-mono);
  font-size: var(--text-h3);            /* 20px default */
  line-height: var(--leading-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.card__value--text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--fw-medium);
  word-break: break-all;
}
.card__value--text a {
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* malá jednotka za hodnotou karty (např. „/ celkem", „ms") */
.card__value-unit {
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  color: var(--color-tertiary);
}
.card__sub {
  font-size: var(--text-fine);
  line-height: var(--leading-caption);
  color: var(--color-tertiary);
  margin-top: var(--spacing-8);
  overflow-wrap: anywhere;
}

/* ── Tables ────────────────────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.table th, .table td {
  text-align: left;
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
  color: var(--color-body);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.table th {
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  border-bottom: var(--border-hairline) solid var(--color-body);   /* těžší pod hlavičkou */
}

/* ── Alerts ────────────────────────────────────────────────────────── */
.alert {
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-none);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin-bottom: var(--spacing-16);
  border: var(--border-hairline) solid var(--color-border-hairline);
  background: var(--color-canvas);
  color: var(--color-body);
}
.alert--ok {
  background: var(--color-badge-success);
  color: var(--color-ink);
  border-color: var(--color-success);
}
.alert--err {
  background: var(--color-badge-failed);
  color: var(--color-ink);
  border-color: var(--color-callout-red);
}
.alert--info {
  background: var(--color-badge-neutral);
  color: var(--color-ink);
  border-color: var(--color-border-hairline);
}

/* ── FormRow ───────────────────────────────────────────────────────── */
.form-row { margin-bottom: var(--spacing-16); }
.form-row__hint {
  font-size: var(--text-fine);
  line-height: var(--leading-caption);
  color: var(--color-tertiary);
  margin-top: var(--spacing-4);
}

/* ── Help / Empty (živý status řádek; vysvětlivky jdou do (i) tooltipu) ─ */
.help {
  color: var(--color-tertiary);
  font-size: var(--text-meta);
  line-height: var(--leading-body);
  margin: 0 0 var(--spacing-8);
  max-width: var(--reading-max);
  overflow-wrap: anywhere;
}
.empty {
  background: var(--color-canvas);
  border: var(--border-hairline) dashed var(--color-light-ash);
  border-radius: var(--radius-none);
  padding: var(--spacing-32);
  color: var(--color-tertiary);
  text-align: center;
  font-size: var(--text-body);
}
.empty strong {
  color: var(--color-ink);
  display: block;
  margin-bottom: var(--spacing-6);
  font-weight: var(--fw-semibold);
}

/* ── Info button (i tooltip) ───────────────────────────────────────── */
.info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: var(--spacing-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-tertiary);
  cursor: help;
  vertical-align: middle;
  position: relative;
  transition: color 120ms, background 120ms;
}
.info:hover, .info:focus-visible {
  color: var(--color-ink);
  background: var(--color-hover);
}
.info .material-symbols-sharp { font-size: 18px; color: inherit; }

/* Tooltip = canvas popover + hairline (žádný stín) */
.info[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: var(--tt-top, calc(100% + 6px));
  bottom: var(--tt-bottom, auto);
  left: var(--tt-left, 0);
  right: var(--tt-right, auto);
  background: var(--color-canvas);
  color: var(--color-body);
  padding: var(--spacing-8) var(--spacing-12);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-none);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  line-height: var(--leading-caption);
  font-weight: var(--fw-regular);
  white-space: normal;
  width: var(--tt-width, min(320px, calc(100vw - 24px)));
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
  z-index: 100;
}
.info:hover::after,
.info:focus-visible::after,
.info[aria-expanded="true"]::after { opacity: 1; pointer-events: auto; }

/* ── Utility třídy (nahrazují roztroušené inline styly v EJS) ───────── */
.btn--block { width: 100%; }
.text-center { text-align: center; }
.text-muted { color: var(--color-tertiary); }

.u-mt-8  { margin-top: var(--spacing-8); }
.u-mt-12 { margin-top: var(--spacing-12); }
.u-mt-24 { margin-top: var(--spacing-24); }

/* Formuláře */
.form--narrow { max-width: 400px; }
.form--inline { display: flex; gap: var(--spacing-8); }
.inline-form  { display: inline; margin: 0; }
.select--auto { display: inline-block; width: auto; }