/* K-Line · luxusní výběrová menu, pouze vizuál.
   ZÁMĚRNĚ neměníme position, inset, top, left, z-index, width,
   max-height, overflow ani popover/top-layer: tato pravidla vlastní K-Line. */
:root {
  --kl-menu-glow: var(--accent, #368cfa);
  --kl-menu-glow-soft: color-mix(in srgb, var(--accent, #368cfa) 20%, transparent);
  --kl-menu-ink: var(--text, #eaf4ff);
}

/* Společný prostorový povrch panelů; každý motiv přebírá své proměnné. */
:where(.kline-select-picker,.load-multi-list:not([hidden]),.country-suggestion-menu,.place-suggestion-menu,.language-switch-menu) {
  border-color: color-mix(in srgb, var(--kl-menu-glow) 36%, var(--border, rgba(126,167,222,.22)));
  border-radius: 22px;
  background:
    radial-gradient(ellipse 72% 46% at 95% 2%, color-mix(in srgb, var(--kl-menu-glow) 23%, transparent), transparent 81%),
    radial-gradient(ellipse 55% 38% at 100% 100%, color-mix(in srgb, var(--kl-menu-glow) 12%, transparent), transparent 85%),
    linear-gradient(138deg, color-mix(in srgb, var(--panel-solid, #0d1728) 94%, var(--kl-menu-glow) 6%), var(--panel-solid, #0c1627) 85%);
  box-shadow:
    0 27px 68px rgba(0, 0, 0, .43),
    0 0 26px var(--kl-menu-glow-soft),
    inset 0 1px 0 rgba(231,247,255,.13),
    inset 0 12px 23px color-mix(in srgb, var(--kl-menu-glow) 10%, transparent),
    inset 0 -1px 0 rgba(0,0,0,.35);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.kline-select-picker {
  /* Místo i chování popupu spravuje stávající kód aplikace. */
  border-radius: 24px;
}
.kline-select-picker-head {
  border-bottom-color: color-mix(in srgb,var(--kl-menu-glow) 18%,transparent);
  background: linear-gradient(180deg, color-mix(in srgb,var(--kl-menu-glow) 9%,var(--kpicker-panel-strong, #14243a)), transparent);
}
.kline-select-picker-head > span {
  border: 1px solid color-mix(in srgb,var(--kl-menu-glow) 29%,transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.kline-select-search input {
  border-color: color-mix(in srgb,var(--kl-menu-glow) 35%,var(--kpicker-border,rgba(150,180,220,.2)));
  border-radius: 18px;
  background: linear-gradient(130deg, var(--kpicker-panel-strong,#162840),color-mix(in srgb,var(--kl-menu-glow) 10%,var(--kpicker-panel,#14263e)));
  box-shadow: inset 0 3px 12px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.05);
}
/* Jedno souvislé menu, jemné stínované oddělovače místo jednotlivých rámečků. */
.kline-select-list {gap: 0;}
.kline-select-option,
.country-suggestion-menu button,
.place-suggestion-menu button,
.language-switch-option {
  position: relative;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transition: background .14s ease,box-shadow .14s ease,color .14s ease;
}
.kline-select-option::after,
.country-suggestion-menu button::after,
.place-suggestion-menu button::after,
.language-switch-option::after {
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--kl-menu-glow) 20%,rgba(180,200,230,.26)) 18%,color-mix(in srgb,var(--kl-menu-glow) 11%,rgba(180,200,230,.15)) 84%,transparent);
  box-shadow:0 3px 7px rgba(0,0,0,.2);
}
.kline-select-option:hover,
.kline-select-option.is-keyboard,
.country-suggestion-menu button:hover,
.country-suggestion-menu button.keyboard-active,
.place-suggestion-menu button:hover,
.place-suggestion-menu button.keyboard-active,
.language-switch-option:hover,
.language-switch-option:focus-visible {
  border-color: transparent;
  background: linear-gradient(106deg,color-mix(in srgb,var(--kl-menu-glow) 18%,rgba(255,255,255,.04)),color-mix(in srgb,var(--kl-menu-glow) 12%,rgba(255,255,255,.015)));
  box-shadow: inset 0 1px 0 rgba(230,246,255,.13),inset 0 -1px 0 rgba(3,10,25,.18),0 8px 17px rgba(0,0,0,.20);
}
.kline-select-option.is-selected,
.language-switch-option.is-active {
  border-color: color-mix(in srgb,var(--kl-menu-glow) 45%,transparent);
  background: linear-gradient(115deg,color-mix(in srgb,var(--kl-menu-glow) 58%,#174885),color-mix(in srgb,var(--kl-menu-glow) 32%,#102d61));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--kl-menu-glow) 30%,transparent),0 10px 22px var(--kl-menu-glow-soft),inset 0 1px 0 rgba(238,251,255,.25),inset 0 -7px 14px rgba(0,15,46,.25);
}
.kline-select-option:is(:hover,.is-keyboard,.is-selected)::after,
.language-switch-option:is(:hover,.is-active)::after,
.country-suggestion-menu button:hover::after,
.place-suggestion-menu button:hover::after {opacity:0;}
.kline-select-option {gap:9px;min-height:45px;padding:7px 11px;}
.kline-select-option > span:not(.kl-vehicle-row-label) {min-width:0;flex:1;}
.kline-select-option .kl-vehicle-icon {
  width:39px;
  height:29px;
  object-fit:contain;
  flex:0 0 39px;
  pointer-events:none;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.3));
}
.kline-select-option b {
  border-radius:50%;
  border:1px solid rgba(107,252,216,.55);
  background:linear-gradient(145deg,#23dbac,color-mix(in srgb,var(--kl-menu-glow) 66%,#1879ec));
  box-shadow:0 0 14px rgba(15,224,172,.28),inset 0 1px 0 rgba(255,255,255,.35);
}
/* Původní vlastní posuvník, pouze efektní vzhled. */
:where(.kline-select-list,.load-multi-list,.country-suggestion-menu,.place-suggestion-menu,.language-switch-menu) {scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--kl-menu-glow) 56%,transparent) transparent;}
:where(.kline-select-list,.load-multi-list,.country-suggestion-menu,.place-suggestion-menu,.language-switch-menu)::-webkit-scrollbar {width:9px;}
:where(.kline-select-list,.load-multi-list,.country-suggestion-menu,.place-suggestion-menu,.language-switch-menu)::-webkit-scrollbar-track {background:transparent;}
:where(.kline-select-list,.load-multi-list,.country-suggestion-menu,.place-suggestion-menu,.language-switch-menu)::-webkit-scrollbar-thumb {
  border-radius:999px;
  border:2px solid transparent;
  background:linear-gradient(180deg,color-mix(in srgb,var(--kl-menu-glow) 72%,#7dcbff),color-mix(in srgb,var(--kl-menu-glow) 40%,#123e7f)) padding-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
/* Vícenásobný výběr: zachováme PŘESNÉ původní top/left/width/z-index/overflow/max-height. */
.load-multi-open {
  border-color:color-mix(in srgb,var(--kl-menu-glow) 36%,var(--border));
  background:linear-gradient(135deg,color-mix(in srgb,var(--panel-alt) 93%,var(--kl-menu-glow) 7%),var(--panel-alt));
  box-shadow:inset 0 1px 0 rgba(237,250,255,.12),0 7px 19px rgba(0,0,0,.22);
}
.load-multi-open b {color:#22e1aa;text-shadow:0 0 11px rgba(25,224,172,.4);}
.load-multi-list:not([hidden]) {gap:0;border-radius:21px;}
.load-multi-list label {
  position:relative;
  min-height:46px;
  padding:7px 10px 7px 12px;
  border-radius:12px;
  background:transparent;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--kl-menu-glow) 13%,rgba(190,208,239,.11));
  transition:background .14s ease,box-shadow .14s ease;
}
.load-multi-list label:hover {
  background:linear-gradient(105deg,color-mix(in srgb,var(--kl-menu-glow) 17%,transparent),color-mix(in srgb,var(--kl-menu-glow) 9%,transparent));
  box-shadow:inset 0 1px 0 rgba(234,248,255,.12),0 8px 17px rgba(0,0,0,.18);
}
.load-multi-list label:has(input:checked) {
  background:linear-gradient(105deg,color-mix(in srgb,var(--kl-menu-glow) 28%,rgba(3,38,81,.84)),color-mix(in srgb,var(--kl-menu-glow) 12%,rgba(2,25,59,.65)));
  box-shadow:inset 0 1px 0 rgba(237,251,255,.16),0 0 0 1px color-mix(in srgb,var(--kl-menu-glow) 32%,transparent);
}
/* Skutečný checkbox zůstává dostupný přes label, ale není samostatný Windows čtverec. */
.load-multi-list label input[type="checkbox"] {
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
  margin:0;
}
.load-multi-list label:focus-within {outline:2px solid color-mix(in srgb,var(--kl-menu-glow) 62%,#cef6ff);outline-offset:-2px;}
.load-multi-list label.kl-has-vehicle-icon::before {
  content:"";
  display:block;
  width:39px;height:29px;
  flex:0 0 39px;
  background-image:var(--kl-vehicle-img);
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.28));
}
.load-multi-list label::after {
  content:"✓";
  margin-left:auto;
  display:grid;
  place-items:center;
  flex:0 0 27px;
  width:27px;height:27px;
  border-radius:50%;
  border:1px solid rgba(125,243,221,.60);
  color:white;
  background:linear-gradient(145deg,#20d9ac,color-mix(in srgb,var(--kl-menu-glow) 70%,#2378ef));
  box-shadow:0 0 13px rgba(14,229,174,.24),inset 0 1px 0 rgba(255,255,255,.34);
  opacity:0;
  transform:scale(.86);
  transition:opacity .12s ease,transform .12s ease;
}
.load-multi-list label:has(input:checked)::after {opacity:1;transform:scale(1);}
.load-multi-done {
  border:1px solid rgba(107,255,227,.8);
  border-radius:15px;
  background:linear-gradient(175deg,#21e3ac,#0fa37a 75%,#0b735c);
  box-shadow:inset 0 1px 1px rgba(238,255,251,.45),inset 0 -5px 8px rgba(0,72,62,.32),0 0 13px rgba(6,243,175,.25),0 8px 15px rgba(0,0,0,.25);
}
.load-multi-done:hover {filter:brightness(1.09);}
/* Barvy čerpají z motivu, kde chybí akcent, zachováme kontrast. */
html[data-theme="white"] :where(.kline-select-picker,.load-multi-list:not([hidden]),.country-suggestion-menu,.place-suggestion-menu,.language-switch-menu) {
  background:linear-gradient(145deg,rgba(239,247,255,.98),rgba(218,233,249,.98));
  box-shadow:0 18px 55px rgba(42,73,117,.28),inset 0 1px 0 rgba(255,255,255,.95),0 0 20px var(--kl-menu-glow-soft);
}
@media (prefers-reduced-motion:reduce) {
  .kline-select-option,.load-multi-list label {transition:none;}
}

/* Ultra přepisuje povrch všech role=listbox pomocí !important.
   Přizpůsobujeme pouze vizuál cílových K-Line menu, nikoli jejich vrstvení. */
html[data-theme="ultra"] :is(.kline-select-picker,.country-suggestion-menu,.place-suggestion-menu) {
  background:
    radial-gradient(ellipse 72% 46% at 95% 2%, color-mix(in srgb, var(--kl-menu-glow) 27%, transparent), transparent 81%),
    linear-gradient(138deg, color-mix(in srgb, var(--panel-solid, #071a31) 93%, var(--kl-menu-glow) 7%), var(--panel-solid, #071a31) 85%) !important;
  border-color:color-mix(in srgb,var(--kl-menu-glow) 60%,#83dfff) !important;
  box-shadow:0 27px 68px rgba(0,0,0,.55),0 0 25px var(--kl-menu-glow-soft),inset 0 1px 0 rgba(231,247,255,.22),inset 0 12px 23px color-mix(in srgb,var(--kl-menu-glow) 12%,transparent) !important;
}
html[data-theme="ultra"] .language-switch-menu .language-switch-option:hover {
  background:linear-gradient(106deg,color-mix(in srgb,var(--kl-menu-glow) 18%,rgba(255,255,255,.04)),color-mix(in srgb,var(--kl-menu-glow) 12%,rgba(255,255,255,.015))) !important;
  box-shadow:inset 0 1px 0 rgba(230,246,255,.13),0 8px 17px rgba(0,0,0,.20) !important;
}


/* Sjednocení všech výběrových menu pro Dark Ultra a Ultra.
   Styl jako jazyk: průhledné rozmazané pozadí + dělicí pruhy místo rámečků. */
html:is([data-theme="ultra"],[data-theme="ultra-blue"]) :is(
  .kline-select-picker,
  .load-multi-list:not([hidden]),
  .country-suggestion-menu,
  .place-suggestion-menu,
  .language-switch-menu,
  .registry-suggestion-menu,
  .kline-time-picker,
  .kline-date-picker,
  .load-filter-preset-menu[open] > div
) {
  backdrop-filter: blur(22px) saturate(122%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(122%) !important;
}
html:is([data-theme="ultra"],[data-theme="ultra-blue"]) :is(
  .kline-select-list,
  .load-multi-list:not([hidden]),
  .country-suggestion-menu,
  .place-suggestion-menu,
  .language-switch-menu,
  .registry-suggestion-menu,
  .kline-time-picker-list,
  .kline-date-picker-grid
) { gap: 0 !important; }
html:is([data-theme="ultra"],[data-theme="ultra-blue"]) :is(
  .kline-select-option,
  .country-suggestion-menu button,
  .place-suggestion-menu button,
  .language-switch-option,
  .registry-suggestion-menu button,
  .kline-time-option,
  .kline-date-picker .kline-date-option
) {
  border-color: transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:is([data-theme="ultra"],[data-theme="ultra-blue"]) :is(
  .kline-select-option,
  .country-suggestion-menu button,
  .place-suggestion-menu button,
  .language-switch-option,
  .registry-suggestion-menu button,
  .kline-time-option,
  .kline-date-picker .kline-date-option
)::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--kl-menu-glow) 20%,rgba(180,200,230,.24)) 18%, color-mix(in srgb,var(--kl-menu-glow) 10%,rgba(180,200,230,.14)) 84%, transparent);
  box-shadow: 0 2px 5px rgba(0,0,0,.22);
}
html:is([data-theme="ultra"],[data-theme="ultra-blue"]) :is(
  .kline-select-option:last-child,
  .country-suggestion-menu button:last-child,
  .place-suggestion-menu button:last-child,
  .language-switch-option:last-child,
  .registry-suggestion-menu button:last-child,
  .kline-time-option:last-child
)::after { opacity: 0; }
html:is([data-theme="ultra"],[data-theme="ultra-blue"]) .load-multi-list label {
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:is([data-theme="ultra"],[data-theme="ultra-blue"]) .load-multi-list label + label {
  border-top: 1px solid color-mix(in srgb,var(--kl-menu-glow) 12%,rgba(182,198,222,.14)) !important;
}


/* Oprava vrstvení state pickerů a dalších výběrových menu.
   Musí být vždy nad kartami a filtry; řeší i druhé skryté menu pod obsahem. */
html:is([data-theme="ultra"],[data-theme="ultra-blue"]) :is(
  .kline-select-picker,
  .kline-select-picker[popover]:popover-open,
  .load-multi-list:not([hidden]),
  .load-multi-list[popover]:popover-open,
  .country-suggestion-menu,
  .place-suggestion-menu,
  .language-switch-menu,
  .registry-suggestion-menu,
  .kline-time-picker,
  .kline-time-picker[popover]:popover-open,
  .kline-date-picker,
  .kline-date-picker[popover]:popover-open,
  .load-filter-preset-menu[open] > div,
  [role="listbox"].country-suggestion-menu,
  [role="listbox"].place-suggestion-menu
) {
  z-index: 2147483642 !important;
  isolation: isolate !important;
}
html:is([data-theme="ultra"],[data-theme="ultra-blue"]) :is(
  .country-suggestion-menu,
  .place-suggestion-menu,
  .language-switch-menu,
  .registry-suggestion-menu,
  .kline-select-picker,
  .load-multi-list:not([hidden]),
  .kline-time-picker,
  .kline-date-picker
) {
  box-sizing: border-box;
}


/* 2026-10-09 · Přidat náklad / vozidla: jednotné zarovnání řádků i pro položky bez ikony. */
:is(.kl-load-vehicle-choice,.kl-bulk-vehicle-choice) .load-multi-list .load-multi-option.kl-vehicle-option {
  display:grid !important;
  grid-template-columns: 39px 27px minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:12px !important;
  justify-content:stretch !important;
}
:is(.kl-load-vehicle-choice,.kl-bulk-vehicle-choice) .load-multi-list .load-multi-option.kl-vehicle-option::before {
  content:"";
  display:block;
  width:39px;
  height:29px;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.28));
  opacity:.98;
}
:is(.kl-load-vehicle-choice,.kl-bulk-vehicle-choice) .load-multi-list .load-multi-option.kl-vehicle-option.kl-has-vehicle-icon::before {
  background-image:var(--kl-vehicle-img);
}
:is(.kl-load-vehicle-choice,.kl-bulk-vehicle-choice) .load-multi-list .load-multi-option.kl-vehicle-option .load-multi-tick {
  justify-self:center;
}
:is(.kl-load-vehicle-choice,.kl-bulk-vehicle-choice) .load-multi-list .load-multi-option.kl-vehicle-option .load-multi-name {
  justify-self:start;
  text-align:left;
}
