/*
 * base.css — základní styly dashboardu DiceMaster
 *
 * Tento soubor definuje globální CSS proměnné v :root, které slouží
 * jako jediný zdroj pravdy pro barevnou paletu napříč celým dashboardem.
 * Ostatní CSS soubory (components.css, say.css, discord.css, sidebar.css,
 * mobile.css, login.css) tyto proměnné konzumují přes var(--color-*),
 * aby šlo barvy upravovat centrálně bez hledání duplicit.
 *
 * Hodnoty kopírují původní paletu zdokumentovanou v CLAUDE_CONTEXT.txt § 4
 * a odpovídají Discord-style tmavému tématu (Požadavek 8.1).
 */

:root {
  /* Primární paleta — pozadí, karty, vstupy a typografie */
  --color-bg:           #1a1b1e;
  --color-card:         #25262b;
  --color-input-bg:     #1a1b1e;
  --color-input-border: #373a40;
  --color-text:         #e8eaed;
  --color-placeholder:  #4e5058;
  --color-focus:        #5865f2;

  /* Sekundární paleta — okraje karet a sémantické stavy */
  --color-card-border:  #2c2e33;
  --color-danger:       #ed4245;  /* Discord red — chyby a kritická tlačítka */
  --color-success:      #57f287;  /* Discord green — potvrzení a ankety */
  --color-warning:      #fee75c;  /* Discord yellow — varování */
  --color-muted:        #868e96;  /* Sekundární text — popisky a subtitle */
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--color-bg);
  color: #c9cdd4;
  min-height: 100vh;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.main {
  margin-left: 220px;
  padding: 32px;
  max-width: 1280px;
}

.page { display: none; }
.page.active { display: block; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.subtitle {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 0;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 14px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(80px);
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 100;
  max-width: 320px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { border-color: #1e5c3a; }
.toast.error   { border-color: #6e2c2c; }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.preview-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-focus);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.restart-warn {
  display: none;
  background: #2d2505;
  border: 1px solid #7c5d0a;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: #f59e0b;
  margin-top: 12px;
  align-items: center;
  gap: 8px;
}
.restart-warn.show { display: flex; }

.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-card-border);
}
.toggle-row label:first-child {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
}