:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #444444;
  --box: #ffffff;
  --aisle-gray: #d4d4d4;
  --aisle-green: #cdeec2;
  --box-border: #5b6168;
  --label: #0b3d91;
  --hit: #ffd400;
  --hit-fg: #000000;
  --hit-ring: #000000;
  --empty-edit: #fafafa;
  --line: #c9cdd2;
  --primary: #0b3d91;
  --primary-fg: #ffffff;
  --warn: #a00000;
  --miss-bg: #ffd9d9;
  --focus: #0060df;
  --cell: 56px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f11;
    --fg: #f5f5f5;
    --muted: #c7c7c7;
    --box: #1c1f23;
    --aisle-gray: #4a4f56;
    --aisle-green: #2c5a28;
    --box-border: #9aa1a9;
    --label: #8fb8ff;
    --empty-edit: #16181b;
    --line: #3a3f45;
    --primary: #8fb8ff;
    --primary-fg: #000000;
    --warn: #ff8080;
    --miss-bg: #4a1414;
    --focus: #8fb8ff;
    --hit-ring: #ffffff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 18px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }

/* ---------- horní lišta ---------- */
.top {
  background: var(--bg);
  border-bottom: 2px solid var(--line);
  padding: 12px 16px 8px;
}
.top__row { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.find__input {
  flex: 0 0 auto;
  width: calc(4ch + 28px); /* max. 4 číslice */
  font: 800 2.4rem/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
  border: 3px solid var(--fg); border-radius: 10px;
  background: var(--bg); color: var(--fg);
  text-align: center;
}
.find__input::placeholder { color: var(--muted); opacity: 1; }
.find__input.is-found { background: var(--hit); color: var(--hit-fg); border-color: var(--hit-fg); }
.find__input.is-missing { background: var(--miss-bg); color: var(--warn); border-color: var(--warn); }
.status { margin: 8px 0 0; font-size: 1.15rem; font-weight: 700; color: var(--warn); }
.status:empty { display: none; }


/* ---------- tlačítka ---------- */
.btn {
  min-height: 52px; min-width: 52px;
  padding: 8px 16px;
  font-family: inherit; font-weight: 600; font-size: 1.1rem; line-height: 1.1;
  color: var(--fg); background: var(--box);
  border: 2px solid var(--box-border); border-radius: 10px;
  cursor: pointer;
}
.btn--icon { font-size: 1.8rem; padding: 0; width: 56px; flex: 0 0 auto; }
.btn--icon svg { display: block; margin: auto; }
.btn--primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn--warn { color: var(--warn); }
.btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- mapa ---------- */
.mapwrap {
  overflow-x: auto; overflow-y: visible; padding: 12px;
  -webkit-overflow-scrolling: touch;
  /* Posun jedním prstem nechává prohlížeči, přiblížení dvěma prsty obsluhuje app.js. */
  touch-action: pan-x pan-y;
}
/* Mřížka bez mezer, aby uličky tvořily souvislé pásy jako v Excelu. */
.map { border-collapse: collapse; margin: 0 auto; }
.map td {
  width: var(--cell); min-width: var(--cell); max-width: var(--cell); height: var(--cell);
  padding: calc(var(--cell) * .05); text-align: center; vertical-align: middle;
  font-size: calc(var(--cell) * .4); font-weight: 700; line-height: 1;
}
.map td.bg-gray { background: var(--aisle-gray); }
.map td.bg-green { background: var(--aisle-green); }
.box {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--box); border: 2px solid var(--box-border);
  border-radius: calc(var(--cell) * .14);
  white-space: nowrap; overflow: hidden;
}
.box.note { font-size: calc(var(--cell) * .26); white-space: normal; word-break: break-all; line-height: 1.05; padding: 2px; }
.map td.label {
  position: relative;
  color: var(--label); font-size: calc(var(--cell) * .32);
  text-transform: uppercase; letter-spacing: .03em;
}
/* Popisek oblasti smí přetéct do sousedních prázdných buněk, aniž by roztáhl sloupec. */
.map td.label > span {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; pointer-events: none;
}
.box.hit {
  background: var(--hit); color: var(--hit-fg);
  /* Rámeček roste s velikostí mapy, aby ani na celé mapě nepřekryl číslo. */
  border: max(2px, calc(var(--cell) * .05)) solid var(--hit-ring);
  box-shadow: 0 0 0 max(2px, calc(var(--cell) * .05)) var(--hit), 0 0 0 max(3px, calc(var(--cell) * .09)) var(--hit-ring);
  position: relative; z-index: 1; overflow: visible;
  transform: scale(1.2);
  animation: pulse 1.2s ease-in-out 3;
}
@keyframes pulse { 50% { transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .box.hit { animation: none; } }

/* ---------- režim správce ---------- */
.admin {
  background: var(--bg); border-bottom: 2px solid var(--line);
  padding: 8px 16px;
}
.admin__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0; }
.admin__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 8px; }
.admin__h1 { margin: 0 auto 0 0; font-size: 1.6rem; }
.admin__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin__where { margin: 6px 0 2px; font-weight: 700; }
/* Ve správě se schová hledání i patička. */
.editing .top, .editing .foot { display: none; }
.admin__title input { font: inherit; padding: 6px 8px; border: 2px solid var(--box-border); border-radius: 8px; background: var(--bg); color: var(--fg); }
.admin__hint { margin: 4px 0; color: var(--muted); font-size: .95rem; }
.admin__lbl { font-weight: 600; }
.swatch--gray { background: var(--aisle-gray); }
.swatch--green { background: var(--aisle-green); }
.admin__warn { margin: 4px 0; color: var(--warn); font-weight: 600; }
.admin .btn { min-height: 44px; font-size: .95rem; padding: 6px 12px; }

.editing .map { border-spacing: 0; }
.editing .map th {
  position: sticky; background: var(--bg); color: var(--muted);
  font-size: .8rem; font-weight: 600; padding: 2px 4px; z-index: 2;
}
.editing .map thead th { top: 0; }
.editing .map tbody th { left: 0; }
.editing .map td { border: 1px solid var(--line); padding: 0; background: var(--empty-edit); }
.editing .map td.pos { background: var(--box); }
.editing .map td.bg-gray { background: var(--aisle-gray); }
.editing .map td.bg-green { background: var(--aisle-green); }
.editing .map td.pos input { font-weight: 700; }
.editing .map td.inrange { box-shadow: inset 0 0 0 999px rgba(0, 96, 223, .18); }
.editing .map td.label input { color: var(--label); font-style: italic; }
.editing .map td.sel { outline: 3px solid var(--focus); outline-offset: -3px; }
.editing .map td.dup input { color: var(--warn); text-decoration: underline wavy; }
.map td input {
  width: 100%; height: var(--cell); border: 0; padding: 0 2px;
  background: transparent; color: inherit; text-align: center;
  font: inherit; font-size: calc(var(--cell) * .3);
}
.map td input:focus { outline: none; }

.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; padding: 8px 8px 24px;
}
.btn--small {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; min-width: 0; padding: 6px 10px; font-size: .92rem;
  white-space: nowrap;
}
.btn--small[hidden] { display: none; }
.btn--small img, .btn--small svg { flex: 0 0 auto; border-radius: 5px; }
.btn--small { gap: 6px; }


/* ---------- dialog ---------- */
.dlg {
  border: 2px solid var(--box-border); border-radius: 14px;
  background: var(--bg); color: var(--fg); padding: 20px; width: min(92vw, 420px);
}
.dlg::backdrop { background: rgba(0,0,0,.6); }
.dlg h2 { margin: 0 0 12px; }
.dlg label { display: grid; gap: 6px; font-weight: 600; }
.dlg input { font-size: 1.3rem; padding: 10px; border: 2px solid var(--fg); border-radius: 8px; background: var(--bg); color: var(--fg); }
.dlg__err { color: var(--warn); min-height: 1.4em; font-weight: 600; }
.dlg__btns { display: flex; gap: 8px; }

@media (max-width: 600px) {
  body { font-size: 17px; }
  .find__input { font-size: 2rem; padding: 6px 6px; width: calc(4ch + 18px); }
  .mapwrap { padding: 12px 8px; }
  .top { padding: 8px 12px 6px; }
  .top__row { gap: 8px; }
  .btn { min-height: 48px; min-width: 48px; }
  .btn--icon { width: 52px; }
  .admin { padding: 8px 10px; }
  .admin__h1 { font-size: 1.3rem; }
  .admin .btn { min-height: 40px; min-width: 0; padding: 4px 10px; font-size: .9rem; }
  .admin__lbl { width: 100%; }
  .admin__hint { font-size: .85rem; }
}