/* Layout — Monospace technical dashboard (centered 1280px, 48px rytmus). */

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);   /* dovol .main shrinknout (jinak 560px tabulka roztáhne viewport) */
}

/* ── Topbar (sticky, hairline) ──────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-canvas);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
  padding: var(--spacing-12) var(--spacing-24);
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  flex-wrap: wrap;
}
.topbar__brand {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);          /* 700 */
  font-size: var(--text-body);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.topbar__brand:hover { color: var(--color-ink); text-decoration: none; }
.topbar__nav {
  display: flex;
  gap: var(--spacing-8);
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}
/* Nav links = body text (NE modré), aktivní = ink + 700 + spodní rule */
.topbar__nav a {
  padding: var(--spacing-6) var(--spacing-8);
  color: var(--color-body);
  font-size: var(--text-meta);
  text-decoration: none;
  white-space: nowrap;
  font-weight: var(--fw-regular);
  border-bottom: var(--border-emphasis) solid transparent;
}
.topbar__nav a:hover { color: var(--color-ink); text-decoration: none; }
.topbar__nav a.active {
  color: var(--color-ink);
  font-weight: var(--fw-bold);
  border-bottom-color: var(--color-ink);
}
.topbar__user {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-meta);
  color: var(--color-tertiary);
  flex-wrap: wrap;
}
.topbar__user form { display: inline; margin: 0; }

/* ── Main content area ─────────────────────────────────────────────── */
.main {
  padding: var(--spacing-40) var(--spacing-24);
  max-width: var(--page-max);
  margin: 0 auto;
  width: 100%;
}

/* ── Auth layout ───────────────────────────────────────────────────── */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24);
  background: var(--color-canvas);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-canvas);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-none);
  padding: var(--spacing-32);
}
.auth-card h1 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  margin: 0 0 var(--spacing-24);
  text-align: center;
}

/* ── Grids ─────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--spacing-16); }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid > * { min-width: 0; }   /* dovol shrink (dlouhé URL/text v kartě) */

/* ── Section ───────────────────────────────────────────────────────── */
.section { margin-bottom: var(--section-gap); }     /* 48px */
.section:last-child { margin-bottom: 0; }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-16);
  flex-wrap: wrap;
}
.section__head h2 { margin: 0; }

/* ── Toolbar ───────────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
  flex-wrap: wrap;
}
.toolbar__label {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  line-height: var(--leading-caption);
  font-weight: var(--fw-medium);
  color: var(--color-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-right: var(--spacing-6);
}

/* ── Page head (H1 vlevo, status / actions vpravo) ─────────────────── */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-32);
  flex-wrap: wrap;
}
.page-head h1 { margin: 0; }
.page-head__status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}

/* Status pill — badge-like (pill radius, tint fills, ink text) */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--leading-body);
  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;
}
.status-pill--success { background: var(--color-badge-success); color: var(--color-ink); }
.status-pill--warning { background: var(--color-badge-degraded); color: var(--color-ink); }
.status-pill--danger  { background: var(--color-badge-failed); color: var(--color-ink); }

/* ── Chart container — hairline, 0 rohů, bez stínu ─────────────────── */
.chart {
  background: var(--color-canvas);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-none);
  padding: var(--spacing-16);
  height: 280px;
  position: relative;
}
/* Loading placeholder — než JS dotáhne data a vykreslí graf */
.chart__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-meta);
  color: var(--color-tertiary);
  pointer-events: none;
}

/* ── Table wrap (overflow) ─────────────────────────────────────────── */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-none);
}
.table-wrap .table { min-width: 560px; }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 900px) {
  .grid--2 { grid-template-columns: 1fr; }
  .main { padding: var(--spacing-24) var(--spacing-16); }
  .chart { height: 240px; }
  .section { margin-bottom: var(--spacing-40); }
}

/* iOS zoom prevention — inputy už 16px, jen pojistka */
@media (max-width: 640px) {
  .input, .select, textarea { font-size: 16px; }
  .auth-shell { padding: var(--spacing-12); }
  .auth-card { padding: var(--spacing-20); }
}

@media (max-width: 640px) {
  .topbar {
    padding: var(--spacing-8) var(--spacing-16);
    gap: var(--spacing-12);
  }
  .topbar__brand { font-size: var(--text-body); }
  .topbar__nav { width: 100%; order: 3; flex: none; }
  .topbar__user { margin-left: auto; font-size: var(--text-fine); gap: var(--spacing-6); }
  .topbar__user .badge { display: none; }

  .main { padding: var(--spacing-16) var(--spacing-12); }
  .card { padding: var(--spacing-16); }
  .card__value--display { font-size: 32px; line-height: 1.1; }

  h1 { font-size: 32px; line-height: 1.1; margin-bottom: var(--spacing-16); }
  h2 { font-size: var(--text-h3); line-height: var(--leading-h3); }

  .chart { height: 220px; padding: var(--spacing-12); }
  .section { margin-bottom: var(--spacing-32); }
}

@media (max-width: 420px) {
  .topbar__nav a { padding: var(--spacing-4) var(--spacing-6); font-size: var(--text-fine); }
  .grid--cards { grid-template-columns: 1fr; }
}