/* ---------------------------------------------------------------------------
   SEZNAM KLIENTŮ — pilulky pohledů a patička tabulky, 1:1 s návrhem „Klienti"
   (podklady/claude-design/mockup-backoffice-2026-09-02, náhled 10-klienti-seznam.png).

   VŠECHNA ČÍSLA JSOU Z NÁVRHU, ne odhadnutá od oka. U každého bloku je jméno
   třídy z mockupu, aby šlo dohledat, odkud která hodnota je — návrh se bude
   vracet u dalších obrazovek a odhadem se to podruhé nepotká.
   --------------------------------------------------------------------------- */

/* POZOR: prvky hlavičky (hledání, „+", „Filtrování", „···") TU NEJSOU SCHVÁLNĚ.
   Jsou sdílené s ticketingem jako `.bo-hledani`, `.bo-kruh-akce`, `.bo-filtr-tlac`
   a `.bo-kruh` v `backoffice-mock.css` — návrh pro obě obrazovky používá tytéž třídy
   (`rsearch`, `rfilt`, `fabp`, `rico`), takže druhá sada čísel tady by znamenala dvě
   různé velikosti téhož prvku. Nadpis kreslí sdílená `StrankaHlava` (37 px z návrhu).

   Zůstávají jen věci, které má seznam klientů vlastní: pilulky pohledů a patička. */

/* ---- pohledy (návrh `.frow` + `.fchip`) ---------------------------------- */

.mck .klienti-pohledy {
    display: flex; align-items: center; gap: 9.5px; flex-wrap: wrap;
    min-height: 28px; margin-bottom: 16px;
}
.mck .klienti-pohled {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 14px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    background: var(--white);
    font: 500 14px var(--font-body);
    color: var(--brown-500);
    cursor: pointer; white-space: nowrap;
}
.mck .klienti-pohled:hover { border-color: var(--brown-300); }
/* Vybraná pilulka: zelená výplň i rám a TUČNĚJŠÍ text — přesně jak `.fchip.sel`. */
.mck .klienti-pohled.je-aktivni {
    background: var(--green-100);
    border-color: var(--green-300);
    color: var(--green-700);
    font-weight: 600;
}
.mck .klienti-pohled .n { font-family: var(--font-cisla); font-weight: 700; opacity: .6; }
.mck .klienti-pohled:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---- panel filtrů (návrh `.fpanel`, otevírá ho „Filtrování") -------------- */

/* Bílá karta s voliči, ne pruh v toku: v návrhu je to samostatná plocha nad tabulkou,
   která se objeví a zmizí. Voliče samotné jsou SDÍLENÉ (`.bo-volic` = návrhový `.pick`) —
   druhá sada čísel pro pilulku s šipkou by byla táž chyba jako u prvků hlavičky. */
.mck .klienti-filtry {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 19px;
    /* SAMOSTATNÝ PRUH s mezerou nad tabulkou (návrh `.fpanel`). Do 4. 9. 2026 byl panel
       UVNITŘ karty se seznamem, takže vypadal jako její první řádek. */
    margin-bottom: 16px;
}
/* Oddělovač před řazením (návrh `.fdiv`): filtr a řazení jsou dvě různé věci —
   filtr říká, co se ukáže, řazení v jakém pořadí. */
.mck .klienti-filtry-oddelovac { width: 1px; height: 26px; background: var(--border-hairline); flex: 0 0 auto; }
.mck .klienti-filtry-mezera { flex: 1; }
.mck .klienti-filtry-zrusit {
    font: var(--fw-semibold) 14px var(--font-body);
    color: var(--green-700);
    background: transparent; border: 0; padding: 0;
    cursor: pointer; white-space: nowrap;
}
.mck .klienti-filtry-zrusit:hover { text-decoration: underline; }

/* ---- patička tabulky ----------------------------------------------------- */

/* Návrh má počet vlevo a součet VPRAVO DOLE, na dně karty se seznamem (inline
   styl u `</table>`: flex, gap 16, padding 11/17, horní linka, krémové pozadí).
   Je to pruh MIMO mřížku tabulky, ne `tfoot`: se výběrem sloupců by se `colspan`
   musel dopočítávat a při vodorovném rolování by patička ujela do strany. */
.mck .klienti-paticka {
    display: flex; align-items: center; gap: 16px;
    padding: 11px 17px;
    border-top: 1px solid var(--border-hairline);
    background: var(--cream-50);
    font-size: 14px;
    color: var(--brown-400);
    margin: 0;
    flex-wrap: wrap;
}
.mck .klienti-paticka .klienti-mezera { flex: 1; }
.mck .klienti-paticka .castka {
    font-family: var(--font-cisla); font-weight: 700;
    color: var(--brown-700); white-space: nowrap;
}
/* Druhá a další měna se přidává za první — nesčítá se s ní (ADR-0065). */
.mck .klienti-paticka .castka + .castka { margin-left: 12px; }


/* ---- volba sloupců v podobě ostatních voličů ----------------------------- */

/* Spouštěč stojí v panelu vedle voličů filtrů, takže má vypadat jako ony (návrhový `.pick`
   / naše `.bo-volic`): pilulka 35 px s koutkovou šipkou, ne malý obdélníček s 11,5px písmem.
   Přebíjí se scoped CSS komponenty, protože ta se kreslí i nad tabulkou majetku, kde si
   drobnou podobu drží. SAMA NABÍDKA se nepřebíjí — od 4. 9. 2026 je to popover a jeho
   podoba (i svislé řazení sloupců) patří komponentě, aby byla všude stejná. */
.mck .klienti-filtry .vs-tl {
    height: 35px;
    gap: 8px;
    padding: 0 15px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-hairline);
    background: var(--white);
    color: var(--brown-500);
    font: var(--fw-medium) 14px var(--font-body);
    letter-spacing: normal;
    text-transform: none;
}
.mck .klienti-filtry .vs-tl:hover { border-color: var(--brown-300); }
.mck .klienti-filtry .vs-tl-text { font-size: 14px; letter-spacing: normal; text-transform: none; }
.mck .klienti-filtry .vs-pocet { font-family: var(--font-cisla); font-weight: 700; opacity: .6; }
/* Šipka jako u voličů: koutek otočený o 45°, ne znak „▾" (ten se v každém písmu kreslí jinak). */
.mck .klienti-filtry .vs-tl::after {
    content: "";
    width: 6px; height: 6px;
    border-right: 1.5px solid var(--brown-300);
    border-bottom: 1.5px solid var(--brown-300);
    transform: rotate(45deg) translateY(-2px);
}

/* ZAROVNÁNÍ: komponenta má vlastní okraje pro pás nad tabulkou, které ji v panelu zvedaly
   o 4 px nad ostatní voliče. V panelu odsazení dává jeho `gap`. */
.mck .klienti-filtry .vs { margin: 0; align-self: center; }