/* =============================================================================
   VZHLED APLIKACE
   Barvy jsou nadefinované jako proměnné nahoře – stačí změnit tady.
   ============================================================================= */

:root {
  --pozadi: #f6f5f1;
  --panel: #ffffff;
  --text: #1d2321;
  --text-slaby: #5d6763;
  --okraj: #dcdcd4;
  --akcent: #d4145a;          /* barva tlačítek a území (fialovo-červená jako na O-mapách) */
  --akcent-tmavy: #a80f47;
  --zelena: #2f7d32;
  --varovani: #9a5b00;
  --chyba: #b3261e;
  --info-pozadi: #f1f4ef;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pozadi: #151816;
    --panel: #1e2220;
    --text: #e8ebe8;
    --text-slaby: #a3aca7;
    --okraj: #343a37;
    --info-pozadi: #262b28;
    --akcent: #ee3c7a;
    --akcent-tmavy: #ff6b9a;
    --zelena: #6cc070;
    --varovani: #e3a446;
    --chyba: #f28b82;
  }
}
:root[data-theme="dark"] {
  --pozadi: #151816; --panel: #1e2220; --text: #e8ebe8; --text-slaby: #a3aca7;
  --okraj: #343a37; --info-pozadi: #262b28; --akcent: #ee3c7a; --akcent-tmavy: #ff6b9a;
  --zelena: #6cc070; --varovani: #e3a446; --chyba: #f28b82;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--pozadi);
}

body { display: flex; }

/* --- levý panel --- */
#panel {
  width: 380px; flex: none;
  height: 100%; overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--okraj);
  padding: 16px 18px 24px;
}
#mapa { flex: 1; height: 100%; }

h1 { font-size: 22px; margin: 0 0 4px; }
.podtitul { margin: 0 0 8px; color: var(--text-slaby); }
h2 { font-size: 16px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.krok {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--akcent); color: #fff; font-size: 13px;
}
section { padding: 14px 0; border-top: 1px solid var(--okraj); }

.radek { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.radek label { flex: 0 0 130px; }
.radek select, .radek input[type=text], .radek input[type=search] { flex: 1; min-width: 0; }

select, input[type=text], input[type=search] {
  font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid var(--okraj); border-radius: 6px; padding: 5px 8px;
}
button, .tlacitko-soubor {
  font: inherit; cursor: pointer;
  border: 1px solid var(--okraj); border-radius: 6px;
  background: var(--panel); color: var(--text); padding: 5px 12px;
}
button:hover, .tlacitko-soubor:hover { border-color: var(--akcent); }
.tlacitko-soubor input { display: none; }

button.hlavni {
  width: 100%; margin-top: 8px; padding: 10px;
  background: var(--akcent); border-color: var(--akcent); color: #fff; font-weight: 600;
}
button.hlavni:hover:not(:disabled) { background: var(--akcent-tmavy); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.prepinac { display: flex; gap: 6px; margin-bottom: 6px; }
.prepinac button { flex: 1; }
.prepinac button.aktivni { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.prepinac button small { display: block; font-size: 11px; opacity: 0.8; }

.napoveda { margin: 4px 0; color: var(--text-slaby); }
.mala { font-size: 13px; }

.volba { margin: 6px 0; }
.volba small { color: var(--text-slaby); }
.podvolba { display: flex; align-items: center; gap: 8px; margin: 4px 0 0 24px; }
.podvolba label { flex: 0 0 82px; color: var(--text-slaby); font-size: 14px; }
.podvolba select { flex: 1; }

.info {
  background: var(--info-pozadi); border-radius: 6px;
  padding: 8px 10px; margin-top: 8px; font-size: 14px;
}
.info .varovani { color: var(--varovani); }
.info .chyba { color: var(--chyba); }

/* --- průběh --- */
.ukazatel { height: 8px; background: var(--info-pozadi); border-radius: 4px; overflow: hidden; margin: 12px 0 8px; }
#ukazatel-vypln { height: 100%; width: 0; background: var(--akcent); transition: width 0.2s; }
#kroky { margin: 0; padding-left: 20px; font-size: 14px; }
#kroky li { margin: 2px 0; color: var(--text-slaby); }
#kroky li.probiha { color: var(--text); font-weight: 600; }
#kroky li.hotovo { color: var(--zelena); }
#kroky li.chyba { color: var(--chyba); }

#vysledek { margin-top: 12px; }
#vysledek a.stahnout {
  display: block; text-align: center; padding: 10px; border-radius: 6px;
  background: var(--zelena); color: #fff; font-weight: 600; text-decoration: none;
}
#vysledek p { font-size: 14px; }

footer { margin-top: 12px; font-size: 12px; color: var(--text-slaby); }
footer a { color: inherit; }

/* --- úzké obrazovky: panel nad mapou --- */
@media (max-width: 760px) {
  body { flex-direction: column; height: auto; }
  #panel { width: 100%; height: auto; border-right: 0; padding: 12px 16px; }
  #mapa { height: 70vh; flex: none; }
}