/* Konfigurator Lite (2026-07-04, navrh kap. 4.2/4.7.1; UX iterace L 2026-07-05)
   Doplnek k legacy-configurator/assets/css/app.css - Lite view sdili grid .cfg,
   stage i pravy sloupec s Full verzi; tento soubor resi jen Lite specifika.
   Design tokeny (--paper, --ink, --line, --mono, ...) dedi z hlavniho theme. */

.cfg-lite {
  /* Jednotna vyska formularovych prvku v leve sekci (bod 9 - "podle tlacitka
     Mapa"). Prebiji --control-height (56px) a --control-height-sm (40px), ktere
     davaly prvkum tri ruzne vysky. */
  --lite-ctl-h: 44px;
}

/* Skryty Full engine - ovladaci pole ridi lite-adapter.js. Pojistka nad [hidden]. */
.cfg-lite-engine {
  display: none !important;
}

/* Body 2 a 4: [hidden] atribut prebijeny CSS displayem (napr. .field-grid{display:grid},
   .cfg-inline-actions{display:flex}) - route ovladani a "Odebrat trasu" zustavaly
   videt i bez trasy. Vynutime skryti. */
.cfg-lite [hidden] {
  display: none !important;
}

/* Pravy sloupec: v Lite zustava 1 Souhrn, 2 Cena & vyroba a 6 ArtVenue flow (kosik).
   Skryvaji se 3 Pruvodce velikosti, 4 Trasa, 5 Axivue a 7 System/diagnostika.
   POZOR: poradi sekci urcuje partials/_summary-column.blade.php - pri jeho zmene
   zkontrolovat i tento vyber (nth-of-type pocita jen <section>). */
.cfg-lite .cfg-col--summary > section:nth-of-type(3),
.cfg-lite .cfg-col--summary > section:nth-of-type(4),
.cfg-lite .cfg-col--summary > section:nth-of-type(5),
.cfg-lite .cfg-col--summary > section:nth-of-type(7) {
  display: none;
}

/* Bod 1: callouty leve sekce se prekryvaly Main-stage (S) a byly necitelne.
   Leva sekce dostane vlastni stacking context nad stage, callout jeste vyssi. */
.cfg-lite .cfg-lite-col {
  position: relative;
  z-index: 30;
}

/* --- Jednotna vyska prvku leve sekce (bod 9) ---------------------------- */

.cfg-lite-col .field input:not([type="checkbox"]):not([type="radio"]),
.cfg-lite-col .field select,
.cfg-lite-col .field-control:not(textarea) {
  min-height: var(--lite-ctl-h);
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.2;
}

.cfg-lite-col .btn {
  min-height: var(--lite-ctl-h);
}

/* --- Chips (barvy, velikost, format) ------------------------------------ */

/* Recyklace vzhledu .cfg-choice-grid .mode-chip z app.css; v Lite kompaktnejsi
   a se sjednocenou vyskou. */
.cfg-lite .cfg-lite-chips .mode-chip {
  flex: 0 1 auto;
  min-width: 96px;
  min-height: var(--lite-ctl-h);
}

.cfg-lite .cfg-lite-chips .mode-chip[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Barevna pecka uvnitr chipu (mapovani kodu barvy resi lite-adapter.js). */
.cfg-lite-chip-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

/* Bod 5: odsazeni labelu od prvku sjednoceno s .field { gap: 6px } (napr. gravir),
   aby "Barva trasy", "Format" atd. mely stejnou mezeru label->prvek jako inputy. */
.cfg-lite-choice > span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Informacni souhrn vybrane varianty (jen text, zadne form prvky - O3). */
.cfg-lite-variant-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  font-size: 12.5px;
  line-height: 1.5;
}

.cfg-lite-variant-info dt {
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  align-self: baseline;
}

.cfg-lite-variant-info dd {
  margin: 0;
}

/* --- Info ikona a hover callout (body L1, L6) --------------------------- */

.cfg-lite-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 10px;
  font-style: italic;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}

.cfg-lite-info:hover,
.cfg-lite-info:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}

/* Callout: text nese atribut data-lite-tip, texty jsou v lang. */
.cfg-lite [data-lite-tip] {
  position: relative;
}

.cfg-lite [data-lite-tip]:hover::after,
.cfg-lite [data-lite-tip]:focus-visible::after {
  content: attr(data-lite-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 200;
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--paper);
  font-family: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.45;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

/* Info ikona je vpravo od nadpisu -> callout ukotvit doprava, aby netekl mimo. */
.cfg-lite-info[data-lite-tip]:hover::after,
.cfg-lite-info[data-lite-tip]:focus-visible::after {
  left: auto;
  right: 0;
}

/* --- Taby zdroje mista (bod L2) ----------------------------------------- */

.cfg-lite-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.cfg-lite-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 64px;
  min-height: var(--lite-ctl-h);
  padding: 0 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.cfg-lite-tab:hover:not(:disabled) {
  border-color: var(--ink);
  color: var(--ink);
}

.cfg-lite-tab.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.cfg-lite-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cfg-lite-source-pane {
  margin-bottom: 4px;
}

/* GPX drop zone (bod L2, vzor demo .cfg-drop). */
.cfg-lite-drop {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 18px 16px;
  border: 1px dashed var(--line);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.cfg-lite-drop strong {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cfg-lite-drop span {
  font-size: 12.5px;
}

.cfg-lite-drop:hover,
.cfg-lite-drop.is-dragover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Podminene slidery v sekci 02 (bod L3) - vzhled dedi z legacy .slider/.slider-label. */
.cfg-lite-sliders {
  margin-top: 14px;
}