/* styles/default/components/c-tabs.css — #12 taby (L2 kontext, podřádek, pilulky v kartě); přetečení = horizontální scroll s maskou
   Created :: 2026-10-21
   Updated :: 2026-10-29
   2026-10-29 :: 1.0.5 – border-top vyrovnává podtržení (text záložky v rovině s titulkem); M10-09 – c-tabs__item i jako <button>; 1.0.3 – maska okrajů jen při přetečení (.is-scrollable)
   2026-10-28 :: M9 – úklid a revize (viz 04 kap. 3) */

.c-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--sp-1);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.c-tabs.is-scrollable { mask-image: linear-gradient(90deg, transparent, black 1.2rem, black calc(100% - 1.2rem), transparent); }   /* přetečení: zeslabené okraje; nastavuje app.js, bez přetečení by maska ořízla podtržení krajních tabů (1.0.3) */
.c-tabs::-webkit-scrollbar { display: none; }
.c-tabs__item {
  appearance: none;
  background: none;
  border: 0;                              /* i jako <button> (záložky v draweru, M10-09) */
  border-top: var(--stroke-2) solid transparent;   /* vyrovnání podtržení: bez něj je text záložky o 1 px výš než titulek lišty vedle (1.0.5) */
  font-family: inherit;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--contextbar-h);
  padding: 0 var(--sp-3);
  border-bottom: var(--stroke-2) solid transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.c-tabs__item:hover { color: var(--color-text); text-decoration: none; }
.c-tabs__item.is-active { color: var(--color-text); border-bottom-color: var(--color-primary); }
.c-tabs__item.is-active .c-tabs__count { background: var(--color-primary-soft); color: var(--color-primary-text); }
.c-tabs__item:focus-visible { border-radius: var(--r-sm); }

/* Podřádek (podsekce) – čipy */
.c-tabs--sub .c-tabs__item {
  border-top: 0;
  height: calc(var(--contextbar-sub-h) - .8rem);
  margin: var(--sp-1) 0;
  padding: 0 var(--sp-2);
  border-bottom: 0;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
}
.c-tabs--sub .c-tabs__item.is-active { background: var(--color-surface-selected); color: var(--color-primary-text); }

/* Pilulky uvnitř karty nebo modálu */
.c-tabs--pills { display: inline-flex; gap: var(--sp-half); padding: var(--sp-half); border-radius: var(--r-md); background: var(--color-surface-2); mask-image: none; }
.c-tabs--pills .c-tabs__item { height: calc(var(--control-h) - .6rem); padding: 0 var(--sp-3); border-top: 0; border-bottom: 0; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.c-tabs--pills .c-tabs__item.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--sh-xs); }

@media (max-width: 767.98px) {
  .c-tabs--sub .c-tabs__item, .c-tabs--pills .c-tabs__item { min-height: 3.6rem; }
}