/* ============================================================
   Nástěnkárna — administrace
   Cíl: maximální jednoduchost pro netechnický personál.
   Velká tlačítka, velké písmo, funkční na mobilu.
   ============================================================ */

:root {
  /* Paleta „Espresso & med": slonovinové pozadí, teplá tmavá lišta, medový akcent.
     Názvy proměnných zůstávají (--modra = primární tmavá), mění se jen hodnoty. */
  --modra: #3b2f25;          /* espresso — lišta, odkazy, primární tlačítka */
  --modra-svetla: #4a3b2d;   /* světlejší espresso pro hover */
  --zluta: #e8b13d;          /* med — akcent (logo „árna", štítky) */
  --pozadi: #f6f0e2;         /* slonovina */
  --bila: #fffdf7;           /* teplá bílá karet */
  --text: #2e2519;           /* teplá tmavá pro text */
  --text-tlumeny: #837a68;   /* teplá tlumená */
  --zelena: #3f7d57;
  --cervena: #b6452c;
  --okraj: #e6dcc4;          /* teplý okraj */
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pozadi);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

a { color: var(--modra); }

/* ---------- Horní lišta ---------- */

header.horni {
  background: var(--modra);
  color: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

header.horni .znacka {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

header.horni .znacka span { color: var(--zluta); }

header.horni nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Záložky jsou rozdělené do tří skupin (Obsah / Vzhled / Domov) a barevně
   odlišené — každá skupina má vlastní jemné podbarvení a barvu textu. */
header.horni nav .nav-skup {
  display: inline-flex;
  gap: 3px;
  flex-wrap: wrap;
  align-items: center;
  padding: 3px;
  border-radius: 9px;
}
header.horni nav .nav-skup[data-skupina="Obsah"] { background: rgba(232, 177, 61, 0.16); }
header.horni nav .nav-skup[data-skupina="Vzhled"] { background: rgba(95, 170, 130, 0.16); }
header.horni nav .nav-skup[data-skupina="Domov"]  { background: rgba(210, 120, 80, 0.18); }

header.horni nav a {
  color: #f3ead8;
  text-decoration: none;
  padding: 8px 11px;
  border-radius: 6px;
  font-size: 15px;
}
header.horni nav .nav-skup[data-skupina="Obsah"] a { color: #f3c976; }
header.horni nav .nav-skup[data-skupina="Vzhled"] a { color: #a6dab9; }
header.horni nav .nav-skup[data-skupina="Domov"] a  { color: #f0ab86; }

header.horni nav a:hover { background: rgba(255, 255, 255, 0.12); }
header.horni nav a.aktivni { background: rgba(255, 255, 255, 0.20); }

header.horni .pravy { margin-left: auto; display: flex; align-items: center; gap: 10px; }
header.horni .pravy form { margin: 0; }

.stitek-sprava {
  background: var(--zluta);
  color: var(--modra);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Obsah ---------- */

main.obsah {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

h1 { font-size: 28px; margin: 12px 0 20px; }
h2 { font-size: 21px; margin: 28px 0 12px; }

.popis { color: var(--text-tlumeny); margin-top: -12px; margin-bottom: 20px; }

/* ---------- Zprávy ---------- */

.zpravy { max-width: 1000px; margin: 16px auto 0; padding: 0 16px; }

.zprava {
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 10px;
  font-weight: 600;
}

.zprava.success { background: #e1f3e8; color: var(--zelena); border: 1px solid #b7e0c6; }
.zprava.info    { background: #e3edf7; color: var(--modra); border: 1px solid #c0d4e8; }
.zprava.warning { background: #fdf3dc; color: #8a6116; border: 1px solid #f0deb0; }
.zprava.error   { background: #fbe5df; color: var(--cervena); border: 1px solid #f0c4b8; }

/* ---------- Karty ---------- */

.karta {
  background: var(--bila);
  border: 1px solid var(--okraj);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.dlazdice {
  display: block;
  background: var(--bila);
  border: 1px solid var(--okraj);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s, transform 0.15s;
}

.dlazdice:hover { box-shadow: 0 4px 16px rgba(22, 50, 79, 0.12); transform: translateY(-2px); }
.dlazdice .ikona { font-size: 34px; display: block; margin-bottom: 8px; }
.dlazdice .titul { font-size: 19px; font-weight: 700; }
.dlazdice .info { color: var(--text-tlumeny); font-size: 15px; margin-top: 4px; }

/* ---------- Tlačítka ---------- */

.tlacitko, button.tlacitko, input[type="submit"].tlacitko {
  display: inline-block;
  background: var(--modra);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 13px 22px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.tlacitko:hover { background: var(--modra-svetla); }
.tlacitko.vedlejsi { background: #e6ebf1; color: var(--modra); }
.tlacitko.vedlejsi:hover { background: #d8e0e9; }
.tlacitko.nebezpecne { background: transparent; color: var(--cervena); padding: 8px 10px; font-size: 15px; }
.tlacitko.nebezpecne:hover { background: #fbe5df; }
.tlacitko.male { padding: 8px 14px; font-size: 15px; }

form.radkovy { display: inline; }

/* ---------- Formuláře ---------- */

form p { margin: 0 0 16px; }

form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="file"],
input[type="email"], input[type="tel"], input[type="url"],
select, textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 17px;
  border: 1.5px solid var(--okraj);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--modra);
  border-color: var(--modra);
}

input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--modra); }

.chyba-pole { color: var(--cervena); font-size: 15px; margin-top: 4px; }

.helptext { display: block; color: var(--text-tlumeny); font-size: 14px; }
ul.errorlist { color: var(--cervena); margin: 0 0 8px; padding-left: 18px; }

/* Dvojice formulářů vedle sebe (dnes / zítra) */
.dva-sloupce {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 700px) {
  .dva-sloupce { grid-template-columns: 1fr; }
}

/* ---------- Tabulky / seznamy ---------- */

table.seznam {
  width: 100%;
  border-collapse: collapse;
  background: var(--bila);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--okraj);
}

table.seznam th, table.seznam td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--okraj);
  vertical-align: middle;
}

table.seznam th { background: #eef2f6; font-size: 15px; }
table.seznam tr:last-child td { border-bottom: none; }

.utlumene { color: var(--text-tlumeny); }

.stav-tecka {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
}

.stav-tecka.online { background: #38a169; }
.stav-tecka.offline { background: #c53030; }

/* ---------- Souhrnné statistiky (přehled domovů) ---------- */

.souhrn-radek {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0;
}

.souhrn-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 96px;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.souhrn-cislo { font-size: 30px; font-weight: 700; line-height: 1.1; }
.souhrn-popis { font-size: 14px; color: #64748b; margin-top: 2px; }

/* ---------- Dashboard — drag-drop editor zón ---------- */

.dz-paleta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.dz-chip {
  padding: 7px 14px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  cursor: grab;
  font-weight: 600;
  font-size: 15px;
}
.dz-chip:active { cursor: grabbing; }

.dz-editor-grid {
  display: grid;
  gap: 10px;
  max-width: 540px;
  aspect-ratio: 16 / 9;
  margin-bottom: 8px;
}
.dz-editor-grid.dash-mrizka2x2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.dz-editor-grid.dash-hlavni-bocni { grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.dz-editor-grid.dash-hlavni-bocni .dz-cell-zona1 { grid-column: 1; grid-row: 1 / 4; }
.dz-editor-grid.dash-hlavni-bocni .dz-cell-zona2 { grid-column: 2; grid-row: 1; }
.dz-editor-grid.dash-hlavni-bocni .dz-cell-zona3 { grid-column: 2; grid-row: 2; }
.dz-editor-grid.dash-hlavni-bocni .dz-cell-zona4 { grid-column: 2; grid-row: 3; }
.dz-editor-grid.dash-tri-pasy { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.dz-editor-grid.dash-tri-pasy .dz-cell-zona1 { grid-column: 1 / 3; grid-row: 1; }
.dz-editor-grid.dash-tri-pasy .dz-cell-zona2 { grid-column: 1 / 3; grid-row: 2; }
.dz-editor-grid.dash-tri-pasy .dz-cell-zona3 { grid-column: 1; grid-row: 3; }
.dz-editor-grid.dash-tri-pasy .dz-cell-zona4 { grid-column: 2; grid-row: 3; }

.dz-cell {
  position: relative;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  min-height: 54px;
}
.dz-cell.over { border-color: #2563eb; background: #eff6ff; }
.dz-cell.obsazena { border-style: solid; border-color: #2563eb; background: #e8f0fe; }
.dz-cell-cislo { position: absolute; top: 4px; left: 8px; font-size: 12px; color: #94a3b8; }
.dz-cell-obsah { font-weight: 600; color: #1f2937; }

/* ---------- Fotky v albu ---------- */

.fotky-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.fotka-karta {
  background: var(--bila);
  border: 1px solid var(--okraj);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
}

.fotka-karta img { width: 100%; height: 120px; object-fit: cover; display: block; }

/* ---------- Náhled tabule ---------- */

.nahled-ram {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--okraj);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.nahled-ram iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Přihlášení ---------- */

.prihlaseni-stranka {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--modra);
  padding: 16px;
}

.prihlaseni-okno {
  background: var(--bila);
  border-radius: 16px;
  padding: 36px;
  width: 100%;
  max-width: 420px;
}

.prihlaseni-okno h1 { margin-top: 0; }
.prihlaseni-okno h1 span { color: #c98f1b; }

/* ============ Vizuální výběr (barvy, font, ikony) ============ */

.tema-vyber, .ikona-vyber {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 4px;
}

/* skrytý nativní přepínač — klikací je celá dlaždice */
.tema-moznost input, .ikona-moznost input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.tema-moznost, .ikona-moznost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border: 1.5px solid var(--okraj);
  border-radius: 10px;
  background: var(--bila);
  width: 96px;
  text-align: center;
}

.tema-moznost:has(input:checked),
.ikona-moznost:has(input:checked) {
  border-color: var(--modra);
  box-shadow: 0 0 0 2px var(--modra);
}

.tema-popis { font-size: 13px; line-height: 1.2; color: var(--text); }

/* barevný náhled schématu */
.tema-nahled {
  width: 100%;
  height: 44px;
  border-radius: 7px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 6px;
}

.tema-akcent {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.tema-nahled-modra   { background: #16324f; } .tema-nahled-modra   .tema-akcent { background: #ffc857; }
.tema-nahled-pulnoc  { background: #14181d; } .tema-nahled-pulnoc  .tema-akcent { background: #5fd0e8; }
.tema-nahled-les     { background: #15302a; } .tema-nahled-les     .tema-akcent { background: #ffb454; }
.tema-nahled-ocel    { background: #232a33; } .tema-nahled-ocel    .tema-akcent { background: #7fd8b4; }
.tema-nahled-vinova  { background: #3d1f2e; } .tema-nahled-vinova  .tema-akcent { background: #f2b950; }
.tema-nahled-svetla  { background: #f6f2e9; border: 1px solid var(--okraj); } .tema-nahled-svetla .tema-akcent { background: #a05c12; }
.tema-nahled-slivka  { background: #2a1c3a; } .tema-nahled-slivka  .tema-akcent { background: #f7a8c4; }
.tema-nahled-petrol  { background: #10282e; } .tema-nahled-petrol  .tema-akcent { background: #f0c674; }
.tema-nahled-kava    { background: #2c2018; } .tema-nahled-kava    .tema-akcent { background: #e8b87a; }
.tema-nahled-medova  { background: #f6f0e2; border: 1px solid var(--okraj); } .tema-nahled-medova  .tema-akcent { background: #e8b13d; }
.tema-nahled-espresso { background: #2e2419; } .tema-nahled-espresso .tema-akcent { background: #e8b13d; }

/* náhled fontu */
.font-nahled {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border-radius: 7px;
  background: var(--pozadi);
  color: var(--text);
}
.font-bezpatkove { font-family: system-ui, "Segoe UI", Roboto, sans-serif; }
.font-siroke { font-family: Verdana, "DejaVu Sans", Geneva, sans-serif; }
.font-patkove { font-family: Georgia, "Times New Roman", serif; }
.font-hyperlegible { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; }
.font-lexend { font-family: "Lexend", system-ui, sans-serif; }
.font-vollkorn { font-family: "Vollkorn", Georgia, "DejaVu Serif", serif; }

/* Přibalené webfonty pro náhled v konfigurátoru (stejné soubory jako na tabuli) */
@font-face {
  font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap;
  src: url("../fonts/atkinson-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lexend"; font-weight: 400; font-display: swap;
  src: url("../fonts/lexend-400.woff2") format("woff2");
}
@font-face {
  font-family: "Vollkorn"; font-weight: 400; font-display: swap;
  src: url("../fonts/vollkorn-400.woff2") format("woff2");
}

/* Náhledy designových jazyků v konfigurátoru (dvě mini „dlaždice") */
.styl-nahled {
  width: 100%;
  height: 44px;
  border-radius: 7px;
  background: var(--pozadi);
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.styl-nahled > span { height: 9px; background: var(--text); opacity: 0.85; }
.styl-nahled-plynule > span {
  height: 6px; background: transparent; opacity: 0.5;
  border-bottom: 1.5px solid var(--text);
}
.styl-nahled-bubliny > span { border-radius: 999px; }
.styl-nahled-okna > span {
  background: transparent; opacity: 0.65;
  border: 1.5px solid var(--text); border-radius: 3px;
}
.styl-nahled-cisty > span {
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

/* mřížka ikon */
.ikona-emoji { font-size: 30px; line-height: 1; height: 36px; display: flex; align-items: center; }
.ikona-popis { font-size: 12px; line-height: 1.15; color: var(--text-tlumeny); }