/* Revize spotřebičů – mobil první, velké cíle pro prsty, světlý i tmavý režim podle systému */
:root {
  --bg: #F3F4F6; --plocha: #FFFFFF; --plocha-2: #ECEEF1; --linka: #D6D9DF;
  --text: #15181D; --tlumeny: #5B6270;
  --akcent: #E9A519; --akcent-text: #1C1400; --akcent-jemny: #FCF1D8;
  --ok: #1E7F48; --ok-jemny: #E3F4EA; --chyba: #B83226; --chyba-jemny: #FBE9E7; --info: #1E64A8;
  --stin: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  --r: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1115; --plocha: #191C22; --plocha-2: #22262E; --linka: #2C313A;
    --text: #ECEEF1; --tlumeny: #9AA2AE;
    --akcent: #F2B53A; --akcent-text: #1C1400; --akcent-jemny: #3A2E14;
    --ok: #5BCF8A; --ok-jemny: #17301F; --chyba: #FF7D6E; --chyba-jemny: #3A1D1A; --info: #7DB8F0;
    --stin: 0 1px 2px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.4 system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 1.05rem; margin: 22px 0 8px; color: var(--tlumeny); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* hlavička */
.hlavicka { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; min-height: 56px; background: var(--plocha); border-bottom: 1px solid var(--linka); }
.hlavicka .zpet { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  text-decoration: none; font-size: 1.5rem; flex: none; }
.hlavicka .zpet:active { background: var(--plocha-2); }
.hlavicka .titulek { flex: 1; min-width: 0; }
.hlavicka .titulek h1 { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hlavicka .titulek small { display: block; color: var(--tlumeny); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stav { flex: none; font-size: .8rem; color: var(--tlumeny); background: var(--plocha-2); border: 0;
  border-radius: 999px; padding: 6px 10px; min-height: 32px; cursor: pointer; }
.stav.varovani { color: var(--akcent-text); background: var(--akcent); }
.stav.chyba { color: #fff; background: var(--chyba); }

main { max-width: 760px; margin: 0 auto; padding: 12px 16px 120px; }

/* dlaždice */
.dlazdice { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dlazdice > a, .dlazdice > button { display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  min-height: 92px; padding: 14px; background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r);
  box-shadow: var(--stin); text-decoration: none; text-align: left; cursor: pointer; }
.dlazdice > a:active, .dlazdice > button:active { transform: scale(.98); }
.dlazdice strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.dlazdice small { color: var(--tlumeny); }
.dlazdice .pridat { border-style: dashed; background: transparent; box-shadow: none; color: var(--tlumeny);
  align-items: center; justify-content: center; font-weight: 600; }

/* tlačítka */
.tlacitko, .hlavni { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--linka); background: var(--plocha);
  text-decoration: none; font-weight: 600; cursor: pointer; }
.hlavni { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-text); }
.tlacitko:disabled, .hlavni:disabled { opacity: .5; }
.tlacitko.nebezpecne { color: var(--chyba); }
.akce { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.akce > * { flex: 1 1 160px; }

/* seznam spotřebičů */
.seznam { list-style: none; margin: 0; padding: 0; background: var(--plocha); border: 1px solid var(--linka);
  border-radius: var(--r); overflow: hidden; }
.seznam li + li { border-top: 1px solid var(--linka); }
.seznam a, .seznam label.radek { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 60px; text-decoration: none; }
.seznam a:active { background: var(--plocha-2); }
.seznam .id { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4.2em; }
.seznam .text { flex: 1; min-width: 0; }
.seznam .text small { display: block; color: var(--tlumeny); font-size: .85rem; }
.seznam img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.prazdne { padding: 24px; text-align: center; color: var(--tlumeny); }

.odznak { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: var(--plocha-2); color: var(--tlumeny); white-space: nowrap; }
.odznak.ok { background: var(--ok-jemny); color: var(--ok); }
.odznak.chyba { background: var(--chyba-jemny); color: var(--chyba); }
.odznak.akcent { background: var(--akcent-jemny); color: var(--text); }

/* karta spotřebiče */
.pole { margin: 14px 0; }
.pole > label, .pole > .popisek { display: block; font-size: .85rem; font-weight: 600; color: var(--tlumeny); margin-bottom: 6px; }
input[type=text], input[type=number], input[type=password], input[type=search], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--linka); border-radius: 10px;
  background: var(--plocha); }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; }
.id-vstup { font-size: 1.5rem; font-weight: 700; letter-spacing: .03em; }
.typy { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.typy button, .cip, .segment button { min-height: 46px; padding: 6px 8px; border: 1px solid var(--linka); border-radius: 10px;
  background: var(--plocha); cursor: pointer; font-size: .92rem; line-height: 1.15; }
.typy button.vybrany, .cip.vybrany, .segment button.vybrany { background: var(--akcent); border-color: var(--akcent);
  color: var(--akcent-text); font-weight: 700; }
.cipy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cip { min-width: 52px; }
.cipy input { width: 90px; min-height: 46px; }
.segment { display: flex; gap: 6px; }
.segment button { flex: 1; }
.dva { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.souhrn { margin: 16px 0; padding: 12px 14px; border-radius: 10px; background: var(--plocha-2); font-size: .92rem; }
.souhrn b { font-weight: 700; }
details.dalsi { margin: 16px 0; border: 1px solid var(--linka); border-radius: var(--r); background: var(--plocha); }
details.dalsi > summary { padding: 14px; font-weight: 600; cursor: pointer; min-height: 48px; }
details.dalsi > div { padding: 0 14px 14px; }
.upozorneni { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--chyba-jemny); color: var(--text); font-size: .9rem; }
.upozorneni li { margin: 2px 0; }
table.mereni { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.mereni th, table.mereni td { padding: 6px 4px; border-bottom: 1px solid var(--linka); text-align: left; vertical-align: top; }

.nahledy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nahledy img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; border: 1px solid var(--linka); cursor: pointer; }
.nahledy .foto-btn { width: 76px; height: 76px; border-radius: 10px; border: 1px dashed var(--linka); background: transparent;
  font-size: .8rem; color: var(--tlumeny); display: grid; place-items: center; cursor: pointer; text-align: center; }

.spodni-lista { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--plocha); border-top: 1px solid var(--linka); }
.spodni-lista > * { flex: 1; }
.spodni-lista .hlavni { flex: 2; font-size: 1.05rem; }

/* dialog, oznámení */
dialog { width: min(560px, calc(100vw - 24px)); border: 0; border-radius: 16px; padding: 0; background: var(--plocha); color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog form { padding: 18px; }
dialog h3 { margin-bottom: 8px; }
.toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 30; padding: 10px 16px;
  border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; box-shadow: var(--stin);
  max-width: calc(100vw - 32px); }
.banner { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--akcent-jemny); }
.chyba { color: var(--chyba); }
.tlumene { color: var(--tlumeny); }
.foto-velka { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: #000; }

body.prihlaseni { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
body.prihlaseni .karta { width: min(380px, 100%); padding: 24px; background: var(--plocha); border-radius: 16px; box-shadow: var(--stin); }
body.prihlaseni h1 { margin-bottom: 16px; font-size: 1.3rem; }
body.prihlaseni label { display: block; margin-bottom: 16px; font-weight: 600; }
body.prihlaseni input { margin-top: 6px; }
body.prihlaseni button { width: 100%; }

/* úpravy, výběr, koš */
.zaskrtnuti { width: 24px; height: 24px; flex: none; }
.radek-kos { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.radek-kos .text { flex: 1; min-width: 0; }
.radek-kos .text small { display: block; color: var(--tlumeny); font-size: .85rem; }
dialog { max-height: calc(100vh - 24px); overflow: auto; }
.foto-velka { max-height: 50vh; }

/* meze na kartě */
.meze-box { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--linka); border-radius: 10px; background: var(--plocha); }
.meze-box .tlacitko { width: 100%; margin-top: 8px; }
table.meze { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.meze th, table.meze td { padding: 5px 4px; border-bottom: 1px solid var(--linka); text-align: left; vertical-align: top; }
table.meze th { white-space: nowrap; color: var(--tlumeny); font-weight: 600; }

/* příručka */
.prirucka h3 { font-size: 1.1rem; margin: 0 0 8px; }
.prirucka h4 { margin: 14px 0 6px; font-size: .95rem; }
.prirucka-blok { margin: 0 0 14px; padding: 14px; background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r); scroll-margin-top: 70px; }
.prirucka-blok ul, .prirucka-blok ol { margin: 6px 0; padding-left: 22px; }
.prirucka-blok li { margin: 4px 0; }
.prirucka-blok p { margin: 8px 0; }
.obsah-prirucky { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.obsah-prirucky a { padding: 8px 12px; border-radius: 999px; background: var(--plocha); border: 1px solid var(--linka); text-decoration: none; font-size: .9rem; }
.tabulka { overflow-x: auto; }
.tabulka table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tabulka th, .tabulka td { padding: 6px 8px; border: 1px solid var(--linka); text-align: left; vertical-align: top; }
.tabulka tr:first-child th { background: var(--plocha-2); }
.pozor { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--akcent-jemny); }
.pozor ul { margin: 4px 0 0; }
figure.schema { margin: 8px 0; color: var(--text); }
figure.schema svg { width: 100%; height: auto; max-width: 560px; display: block; }
figure.schema figcaption { font-size: .8rem; color: var(--tlumeny); }

@media print {
  .hlavicka, #lista, .obsah-prirucky, .toast { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { padding: 0; max-width: none; }
  .prirucka-blok { break-inside: avoid; border-color: #bbb; }
}

/* v dialogu je Uložit v kódu první (Enter = uložit), zobrazuje se vpravo */
dialog .akce .hlavni { order: 3; }
dialog .akce .nebezpecne { order: -1; }