/*
 * app.css - ukážkový nástroj na stránke: priebeh crawlu, tabuľka
 * prejdených stránok a rám okolo chatbota.
 *
 * Vzhľad stránky robí šablóna (`tpl/style.css`). Tento súbor rieši len
 * to, čo šablóna nemá - a preto má každá trieda predponu `dm-`. Bez nej
 * by sa mená ako `card`, `bar` či `status` zrazili s triedami šablóny
 * a jedno alebo druhé by vyzeralo inak, než má.
 */

:root {
  --dm-accent: #605dba;
  --dm-text: #343f52;
  --dm-muted: #60697b;
  --dm-line: #e5e7ea;
  --dm-card: #fff;
  --dm-ok: #45c4a0;
  --dm-err: #e2626b;
  --dm-radius: .8rem;
  --dm-code: #f7f8fa;
}

/* Tmavý režim vizuálov 2 až 4 (trieda `dark` na <html>). Prvý vizuál ho
   nemá - šablóna Sandbox tmavý režim nepozná. Okno chatbota ide podľa
   `data-mode`, ktoré zapisuje ten istý prepínač (widget.css). */
:root.dark {
  --dm-text: #f3f4f6;
  --dm-muted: #9ca3af;
  --dm-line: #374151;
  --dm-card: #1f2937;
  --dm-code: #111827;
}

/* Tieto dve miesta majú farbu natvrdo - v tmavom by svietili. */
:root.dark .dm-events li,
:root.dark .dm-pages td { border-bottom-color: var(--dm-line); }
:root.dark .dm-pages td { color: var(--dm-text); }

/* ── priebeh ────────────────────────────────────────────────── */

.dm-card {
  padding: 1.6rem;
  border: 1px solid var(--dm-line);
  border-radius: var(--dm-radius);
  background: var(--dm-card);
  box-shadow: 0 .25rem 1.75rem rgba(30, 34, 40, .07);
}

.dm-head {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.dm-status {
  flex: 1;
  margin: 0;
  color: var(--dm-text);
  font-weight: 600;
}

.dm-status.done { color: var(--dm-ok); }
.dm-status.error { color: var(--dm-err); }
.dm-status.cancelled { color: var(--dm-muted); }

.dm-spinner {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  border: 2px solid rgba(96, 93, 186, .25);
  border-top-color: var(--dm-accent);
  border-radius: 50%;
  animation: dm-spin .8s linear infinite;
}

.dm-spinner[hidden] { display: none; }

@keyframes dm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .dm-spinner { animation-duration: 2.4s; }
}

.dm-stop {
  flex: none;
  padding: .4rem .9rem;
  border: 1px solid var(--dm-line);
  border-radius: 50rem;
  background: transparent;
  color: var(--dm-muted);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}

.dm-stop:hover { color: var(--dm-text); border-color: #c8cbd2; }

.dm-bar {
  height: 5px;
  margin: 1rem 0;
  border-radius: 50rem;
  background: rgba(96, 93, 186, .12);
  overflow: hidden;
}

.dm-bar-fill {
  width: 0;
  height: 100%;
  border-radius: 50rem;
  background: var(--dm-accent);
  transition: width .4s ease;
}

.dm-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

@media (min-width: 768px) {
  .dm-body { grid-template-columns: 1fr 300px; }
}

.dm-events {
  max-height: 17rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  font-size: .85rem;
}

.dm-events li {
  display: flex;
  gap: .6rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(229, 231, 234, .7);
  color: var(--dm-muted);
}

.dm-events li:last-child { border-bottom: 0; color: var(--dm-text); }

.dm-events time {
  width: 2.7rem;
  flex: none;
  text-align: right;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

.dm-shot { margin: 0; }

.dm-shot img {
  display: block;
  width: 100%;
  border: 1px solid var(--dm-line);
  border-radius: .5rem;
}

.dm-shot figcaption {
  margin-top: .4rem;
  color: var(--dm-muted);
  font-size: .78rem;
  text-align: center;
}

/* ── hotový chatbot ─────────────────────────────────────────── */

.dm-mount { max-width: 30rem; }

.dm-snippet { margin-top: 1.2rem; }

.dm-snippet summary {
  padding: .65rem 0;               /* plocha na dotyk aspoň ~40 px */
  color: var(--dm-muted);
  font-size: .85rem;
  cursor: pointer;
}

.dm-snippet summary:hover { color: var(--dm-text); }

.dm-code {
  margin: .7rem 0 0;
  padding: .8rem 1rem;
  overflow-x: auto;
  border: 1px solid var(--dm-line);
  border-radius: var(--dm-radius);
  background: var(--dm-code);
  color: var(--dm-text);
  font: .78rem/1.5 ui-monospace, Consolas, monospace;
}

/* ── prejdené stránky ───────────────────────────────────────── */

.dm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--dm-line);
  border-radius: var(--dm-radius);
  background: var(--dm-card);
}

.dm-pages {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  font-size: .8rem;
}

.dm-pages th {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--dm-line);
  color: var(--dm-muted);
  font-weight: 500;
  text-align: left;
}

.dm-pages td {
  padding: .6rem .8rem;
  border-bottom: 1px solid rgba(229, 231, 234, .6);
  vertical-align: top;
}

.dm-pages tr:last-child td { border-bottom: 0; }

.dm-pages td:first-child {
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Čísla (od odpovede servera ďalej) doprava - dajú sa tak porovnávať. */
.dm-pages th:nth-child(n+3),
.dm-pages td:nth-child(n+3) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dm-tag { color: var(--dm-ok); }
.dm-tag.skip { color: var(--dm-muted); }
.dm-tag.bad { color: var(--dm-err); }

/* ── drobnosti ──────────────────────────────────────────────── */

.dm-error {
  margin: .8rem 0 0;
  color: var(--dm-err);
}

.dm-note { color: var(--dm-muted); }

.dm-feed summary {
  padding: .65rem 0;               /* plocha na dotyk aspoň ~40 px */
  color: var(--dm-muted);
  font-size: .85rem;
  cursor: pointer;
}

.dm-feed summary:hover { color: var(--dm-text); }