/* KÓPIA frontend/filtermenu.css z Contiver Internal (2026-10-30) - zóna je samostatná appka.
   Pri zmene v Internale skopírovať znova a nahradiť html[data-theme="new"] za html[data-ui="new"]. */
/* Jednotny filter pri tabulke (frontend/filtermenu.js) - jediny zdroj vzhladu.
   `html[data-ui="new"] ... button` (0,2,2+) prebije plosne "kazde tlacidlo
   je terakotove" (crm.css sekcia 6) aj `button:hover` (style.css). */

.fm { position: relative; display: inline-flex; }

html[data-ui="new"] .fm button.fm-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; margin: 0; padding: 0 12px 0 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel); box-shadow: none;
  color: var(--t-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
html[data-ui="new"] .fm button.fm-btn:hover { border-color: var(--border-strong); background: var(--t-hover); color: var(--t-ink); }
html[data-ui="new"] .fm button.fm-btn[aria-expanded="true"] { border-color: var(--t-ink); background: var(--panel); color: var(--t-ink); }
/* Zapnutý filter = vybrané -> modrá (oranžová je len akcia). */
html[data-ui="new"] .fm button.fm-btn.active { border-color: var(--brand-blue); background: var(--tone-next-bg); color: var(--t-ink); }
.fm .fm-btn .ui-icon { width: 15px; height: 15px; stroke-width: 2; color: var(--text-dim); }
.fm .fm-btn.active .ui-icon { color: var(--tone-next-text); }
.fm .fm-count {
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* oba panely (zoznam stlpcov + volby stlpca nalavo) */
.fm-pop {
  position: fixed; z-index: 2000; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--t-radius-lg);
  box-shadow: 0 20px 48px -20px rgba(35, 28, 22, .4), 0 2px 6px rgba(35, 28, 22, .06);
  color: var(--text); font-size: 13px; font-weight: 400; text-align: left; text-transform: none; letter-spacing: normal;
  animation: fm-in .12s ease-out;
}
@keyframes fm-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fm-main { width: 272px; }
.fm-fly { width: 280px; }
.fm-pop .fm-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 0 10px 0 16px; box-sizing: border-box; border-bottom: 1px solid var(--t-hairline);
}
.fm-pop .fm-head b { font-family: var(--t-font-display); font-size: 14.5px; font-weight: 700; color: var(--t-ink); }

html[data-ui="new"] .fm-pop button.fm-link {
  height: 26px; margin: 0; padding: 0 8px; border: none; border-radius: 6px; box-shadow: none;
  background: none; color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
html[data-ui="new"] .fm-pop button.fm-link:hover { background: var(--t-hover); color: var(--t-ink); }
html[data-ui="new"] .fm-pop button.fm-x {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0;
  border: none; border-radius: var(--t-radius-sm); box-shadow: none; background: none; color: var(--text-dim); cursor: pointer;
}
html[data-ui="new"] .fm-pop button.fm-x:hover { background: var(--t-hover); color: var(--t-ink); }
.fm-pop .fm-x .ui-icon { width: 15px; height: 15px; stroke-width: 2; }

/* zoznam stlpcov */
.fm-pop .fm-cols { overflow-y: auto; padding: 6px; }
html[data-ui="new"] .fm-pop button.fm-col {
  display: grid; grid-template-columns: 16px minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 8px;
  width: 100%; height: 38px; margin: 0; padding: 0 10px 0 8px; border: none; border-radius: 9px; box-shadow: none;
  background: none; color: var(--text); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
html[data-ui="new"] .fm-pop button.fm-col:hover { background: var(--t-hover); color: var(--text); }
html[data-ui="new"] .fm-pop button.fm-col.open,
html[data-ui="new"] .fm-pop button.fm-col.open:hover { background: var(--panel-alt); color: var(--t-ink); }
.fm-pop .fm-col .fm-chev { display: inline-flex; color: var(--text-dim); }
.fm-pop .fm-col .fm-chev .ui-icon { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .12s; }
.fm-pop .fm-col.open .fm-chev { color: var(--t-ink); }
.fm-pop .fm-col-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-pop .fm-col-sum {
  justify-self: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 500; color: var(--text-dim);
}
.fm-pop .fm-col.on .fm-col-sum {
  padding: 2px 8px; border-radius: 999px; background: var(--t-accent-soft); color: var(--accent-hover); font-weight: 700;
}

/* volby stlpca */
.fm-pop .fm-fly-body { display: flex; flex-direction: column; min-height: 0; padding: 10px 10px 8px; gap: 6px; }
html[data-ui="new"] .fm-pop input.fm-search {
  flex: none; box-sizing: border-box; width: 100%; height: 32px; margin: 0; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel-alt);
  font-size: 12.5px; color: var(--text);
}
html[data-ui="new"] .fm-pop input.fm-search:focus { outline: none; border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px var(--t-accent-soft); }
.fm-pop .fm-bulk { flex: none; display: flex; justify-content: space-between; margin: 0 -2px; }
.fm-pop .fm-list { min-height: 0; max-height: 280px; overflow-y: auto; margin: 0 -2px; }
html[data-ui="new"] .fm-pop button.fm-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; margin: 0; padding: 6px 8px;
  border: none; border-radius: 8px; box-shadow: none; background: none; color: var(--text);
  font-size: 13px; font-weight: 500; text-align: left; line-height: 1.3; cursor: pointer;
}
html[data-ui="new"] .fm-pop button.fm-opt:hover { background: var(--t-hover); color: var(--text); }
.fm-pop .fm-opt .fm-tick {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  box-sizing: border-box; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--panel);
  transition: background .1s, border-color .1s;
}
.fm-pop .fm-opt .fm-tick .ui-icon { width: 12px; height: 12px; stroke-width: 3; color: #fff; opacity: 0; }
.fm-pop .fm-opt.on .fm-tick { border-color: var(--accent); background: var(--accent); }
.fm-pop .fm-opt.on .fm-tick .ui-icon { opacity: 1; }
.fm-pop .fm-opt:not(.on) .fm-label { color: var(--text-dim); }
.fm-pop .fm-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-pop .fm-none { margin: 8px 6px; color: var(--text-dim); font-size: 12.5px; }

/* Sipka pri stlpci ukazuje smer, kam sa volby rozbalia (data-dir z place()). */
html[data-ui="new"] .fm-pop[data-dir="right"] button.fm-col { grid-template-columns: minmax(0, auto) minmax(0, 1fr) 16px; }
.fm-pop[data-dir="right"] .fm-col .fm-chev { order: 3; }
.fm-pop[data-dir="right"] .fm-col .fm-chev .ui-icon { transform: rotate(180deg); }
.fm-pop[data-dir="down"] .fm-col .fm-chev .ui-icon { transform: rotate(-90deg); }

/* "Zobrazené stĺpce" - oddelena posledna polozka (volitelne `columns`) */
.fm-pop .fm-colsbox { border-top: 1px solid var(--border); padding-top: 4px; margin-top: 4px; }
html[data-ui="new"] .fm-pop button.fm-opt:disabled { cursor: default; opacity: .55; }
html[data-ui="new"] .fm-pop button.fm-opt:disabled:hover { background: none; }
.fm-pop .fm-hint { margin: 2px 4px 0; color: var(--text-dim); font-size: 11.5px; }

/* Zobrazene stlpce: dlhsi zoznam + Uložiť dole (2026-09-28) */
.fm-pop .fm-list.fm-list-cols { max-height: min(62vh, 560px); }
.fm-cols-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.fm-cols-foot .fm-hint { margin: 0; }
.fm-pop, .fm-pop .fm-list, .fm-pop .fm-cols { overscroll-behavior: contain; }

/* Volby filtra - uprava vzhladu (2026-09-28): tichsi zaskrtavaci stvorec,
   rovnake pismo pre vsetky volby (aj nezaskrtnute, predtym sive), stavy ako
   farebne stitky rovnake ako v tabulke. */
html[data-ui="new"] .fm-pop button.fm-opt {
  gap: 10px; min-height: 32px; padding: 5px 8px; border-radius: var(--t-radius-sm);
  font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--t-ink);
}
.fm-pop .fm-opt .fm-tick {
  width: 16px; height: 16px; border: 1.5px solid #CFC6BC; border-radius: 4px; background: #fff;
}
.fm-pop .fm-opt:hover .fm-tick { border-color: var(--border-strong); }
.fm-pop .fm-opt .fm-tick .ui-icon { width: 11px; height: 11px; stroke-width: 3.2; }
.fm-pop .fm-opt:not(.on) .fm-label { color: var(--t-ink); }
.fm-pop .fm-label { flex: 1 1 auto; min-width: 0; }

.fm-pop .fm-pill {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.35;
  background: var(--t-grey-chip); color: var(--t-grey-chip-text);
}
.fm-pop .fm-pill[data-tone="red"] { background: var(--danger); color: #fff; }
.fm-pop .fm-pill[data-tone="todo"] { background: var(--state-todo); color: var(--state-todo-text); }
.fm-pop .fm-pill[data-tone="amber"] { background: var(--state-progress); color: #fff; }
.fm-pop .fm-pill[data-tone="green"] { background: var(--success); color: #fff; }
.fm-pop .fm-pill[data-tone="reg"] { background: var(--t-reg); color: #fff; }
.fm-pop .fm-opt:not(.on) .fm-pill { opacity: .55; }

.fm-pop .fm-bulk .fm-hint { align-self: center; margin: 0 6px; }

/* Filter jedneho stlpca z praveho kliku na hlavicku (2026-09-30) - kompaktny:
   sirka podla obsahu, mensia hlavicka a medzery. */
.fm-pop.fm-fly.fm-solo { width: max-content; min-width: 170px; max-width: 260px; }
.fm-pop.fm-solo .fm-head { min-height: 34px; padding: 0 4px 0 12px; }
.fm-pop.fm-solo .fm-head b { font-size: 13px; }
html[data-ui="new"] .fm-pop.fm-solo button.fm-x { width: 24px; height: 24px; }
.fm-pop.fm-solo .fm-fly-body { padding: 6px 6px 6px; gap: 2px; }
html[data-ui="new"] .fm-pop.fm-solo button.fm-link { height: 22px; padding: 0 6px; font-size: 11.5px; }
.fm-pop.fm-solo .fm-bulk { gap: 8px; }
html[data-ui="new"] .fm-pop.fm-solo button.fm-opt { min-height: 26px; padding: 2px 6px; gap: 8px; }
.fm-pop.fm-solo .fm-pill { padding: 2px 8px; font-size: 11px; }
.fm-pop.fm-solo .fm-search { height: 28px; }
.fm-pop.fm-solo .fm-cols-foot { margin-top: 4px; }
.fm-pop.fm-solo .fm-cols-foot > span:empty { display: none; }
.fm-pop.fm-solo .fm-cols-foot { justify-content: flex-end; }
html[data-ui="new"] .fm-pop.fm-solo button.fm-cols-save { height: 28px; padding: 0 12px; font-size: 12.5px; }

/* Okno volieb stlpca - variant B (pouzivatel vybral 2026-10-13 z ukazky dnes / A / B):
   siva hlavicka s modrym "3 z 5", riadky oddelene ciarou, vybrate = modre policko a
   tucne meno, pri kazdej volbe pocet riadkov tabulky (`counts` v filtermenu.js), siva
   pata so suctom a Uložiť. "Vybrať všetky" / "Zrušiť všetky" sive, ked nie je co robit. */
html[data-ui="new"] .fm-pop.fm-fly .fm-head { justify-content: flex-start; gap: 8px; min-height: 42px; padding: 0 6px 0 14px; background: var(--panel-alt); }
.fm-pop.fm-fly .fm-head b { font-size: 13.5px; }
.fm-pop .fm-head-count {
  padding: 2px 8px; border-radius: 999px; background: var(--tone-next-bg); color: var(--tone-next-text);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
html[data-ui="new"] .fm-pop.fm-fly .fm-head button.fm-x { margin-left: auto; width: 26px; height: 26px; }
.fm-pop.fm-fly .fm-fly-body { padding: 0; gap: 0; }
html[data-ui="new"] .fm-pop.fm-fly input.fm-search { width: auto; margin: 8px 10px 2px; }
.fm-pop.fm-fly .fm-bulk { margin: 0; padding: 6px 8px; border-bottom: 1px solid var(--t-hairline); }
html[data-ui="new"] .fm-pop.fm-fly button.fm-link { height: 24px; padding: 0 6px; font-size: 11.5px; color: var(--brand-blue-text); }
html[data-ui="new"] .fm-pop.fm-fly button.fm-link:hover { background: var(--tone-next-bg); color: var(--brand-blue-text); }
html[data-ui="new"] .fm-pop.fm-fly button.fm-link:disabled,
html[data-ui="new"] .fm-pop.fm-fly button.fm-link:disabled:hover { background: none; color: var(--text-dim); opacity: .45; cursor: default; }
.fm-pop.fm-fly .fm-list { margin: 0; padding: 2px 0; }
html[data-ui="new"] .fm-pop.fm-fly button.fm-opt { min-height: 36px; padding: 4px 14px; gap: 10px; border-radius: 0; }
html[data-ui="new"] .fm-pop.fm-fly button.fm-opt + button.fm-opt { box-shadow: inset 0 1px 0 var(--t-hairline); }
.fm-pop.fm-fly .fm-opt.on .fm-tick { border-color: var(--brand-blue); background: var(--brand-blue); }
.fm-pop.fm-fly .fm-opt.on .fm-label { font-weight: 600; }
.fm-pop .fm-n {
  flex: none; margin-left: auto; min-width: 22px; padding: 1px 7px; box-sizing: border-box; border-radius: 999px;
  background: var(--tone-info-bg); color: var(--tone-info-text); font-size: 11.5px; font-weight: 700; text-align: center;
}
.fm-pop.fm-fly .fm-none { margin: 10px 14px; }
.fm-pop.fm-fly .fm-cols-foot { justify-content: space-between; margin: 0; padding: 8px 10px; border-top: 1px solid var(--t-hairline); background: var(--panel-alt); }
.fm-pop.fm-fly .fm-cols-foot .fm-hint { margin: 0; font-size: 12px; }
.fm-pop.fm-fly .fm-cols-foot .fm-cols-save { margin-left: auto; }
html[data-ui="new"] .fm-pop.fm-fly button.fm-cols-save { height: 28px; padding: 0 14px; font-size: 12.5px; }
/* pravy klik na hlavicku (fm-solo): to iste, len nizsie riadky */
.fm-pop.fm-fly.fm-solo { max-width: 280px; }
html[data-ui="new"] .fm-pop.fm-fly.fm-solo .fm-head { min-height: 36px; padding-left: 12px; }
html[data-ui="new"] .fm-pop.fm-fly.fm-solo button.fm-opt { min-height: 30px; padding: 3px 12px; gap: 8px; }
/* Hlavny zoznam filtrov - variant A "tichy zoznam" (pouzivatel vybral 2026-10-13):
   siva hlavicka s modrym "2 zapnuté", nezapnute stlpce bez textu (predtym "Všetky"),
   zapnute tucne s modrym stitkom vyberu (modra = vybrane, predtym oranzova), riadky
   oddelene ciarou, sipka vpravo, "Zobrazené stĺpce" v sivej pate. */
html[data-ui="new"] .fm-pop.fm-main .fm-head { justify-content: flex-start; gap: 8px; min-height: 42px; padding: 0 8px 0 14px; background: var(--panel-alt); }
.fm-pop.fm-main .fm-head b { font-size: 13.5px; }
html[data-ui="new"] .fm-pop.fm-main .fm-head button.fm-link { margin-left: auto; height: 24px; padding: 0 6px; font-size: 11.5px; color: var(--brand-blue-text); }
html[data-ui="new"] .fm-pop.fm-main .fm-head button.fm-link:hover { background: var(--tone-next-bg); color: var(--brand-blue-text); }
.fm-pop.fm-main .fm-cols { padding: 0; }
html[data-ui="new"] .fm-pop.fm-main button.fm-col,
html[data-ui="new"] .fm-pop.fm-main[data-dir="right"] button.fm-col {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) 16px; height: 36px; padding: 0 12px 0 14px;
  border-radius: 0; font-weight: 500;
}
html[data-ui="new"] .fm-pop.fm-main .fm-cols button.fm-col + button.fm-col { box-shadow: inset 0 1px 0 var(--t-hairline); }
html[data-ui="new"] .fm-pop.fm-main button.fm-col.on { font-weight: 700; }
.fm-pop.fm-main .fm-col .fm-chev { order: 3; }
.fm-pop.fm-main .fm-col .fm-chev .ui-icon { transform: rotate(180deg); }
.fm-pop.fm-main[data-dir="down"] .fm-col .fm-chev .ui-icon { transform: rotate(-90deg); }
.fm-pop.fm-main .fm-col.on .fm-col-sum { background: var(--tone-next-bg); color: var(--tone-next-text); }
.fm-pop.fm-main .fm-colsbox { margin: 0; padding: 0; border-top: 1px solid var(--t-hairline); background: var(--panel-alt); }
html[data-ui="new"] .fm-pop.fm-main .fm-colsbox button.fm-col:not(.open) { background: none; }
html[data-ui="new"] .fm-pop.fm-main .fm-colsbox button.fm-col:not(.open):hover { background: var(--t-hover); }