/* ==========================================================================
   /public/css/actors-index.css
   Page-only styles: Actors index (sticky UI + top filters, badges, sidebar filters, search)
   ========================================================================== */


/* ==========================================================================
   00) Sticky UI (presunuto z actors/index.blade.php)
   ========================================================================== */

:root{
  --navbar-h: 0px;
  --topfilters-h: 0px;
  --mobilecats-h: 0px;
  --content-shift: 0px;

  /* ✅ warning bar nad sticky UI (profile warning) */
  --warning-h: 0px;
}

/*
  === BOOT FIX ===
  - dokud JS nenastaví stabilní stav, navbar je neviditelný
*/
html.sticky-booting #main-navbar{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-100%) !important;
}

/* transitiony až po ready */
#main-navbar,
#top-filters-wrap,
.actors-index-row{
  transition: none;
}
html.sticky-ready #main-navbar{
  transition: transform 200ms ease, opacity 0ms linear;
}

/* ✅ iOS fix: top-filters už nepoužívají transform -> animuj top místo transform */
html.sticky-ready #top-filters-wrap{
  transition: top 200ms ease, max-height 200ms ease, opacity 200ms ease;
}

html.sticky-ready .actors-index-row{
  transition: padding-top 200ms ease;
}

/* MOBILE "FILTROVAT": stejna animace jako top-filters */
html.sticky-ready .category-filters-sticky-wrap.d-lg-none{
  transition: max-height 200ms ease, opacity 200ms ease;
}

/* ==========================================================================
   WARNING BAR (nad navbar)
   - samotny bar je fixed v layoutu (id: #profile-warning-bar)
   - zde jen posouvame sticky UI o jeho vysku pres --warning-h
   ========================================================================== */

#profile-warning-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 1100; /* nad navbar (1030) i top-filters (1020) */
}

/* pokud warning existuje, JS prida tridu + nastavi --warning-h */
html.has-profile-warning #main-navbar{
  top: var(--warning-h);
}

/* TOP FILTERS: kdyz jsou pod navbarem */
html.has-profile-warning .top-filters-wrap.with-navbar{
  top: calc(var(--warning-h) + var(--navbar-h));
}

/* NAVBAR */
#main-navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 1030;

  transform: translateY(-100%);
  will-change: transform;
}
#main-navbar.is-visible{
  transform: translateY(0);
}

#navbar-placeholder{
  height: 0px;
}

/* TOP FILTERS */
.top-filters-wrap{
  position: sticky;
  top: 0;
  z-index: 1020;
  background: #fff;
  padding-top: .25rem;

  /* ✅ iOS SAFARI FIX:
     - transform na rodici dropdownu rozbije position:fixed uvnitr (dropdown-menu)
     - na iPhonu se fixed pak chova jako by byl "uvnitr" transformovaneho boxu -> oreze se overflow:hidden
     - proto transform nesmi byt na #top-filters-wrap (posouvame pres top) */
  transform: none !important;
  will-change: top, max-height, opacity;
}
.top-filters-wrap.with-navbar{
  top: var(--navbar-h);
  transform: none !important;
}

/* TOP FILTERS: zrus defaultni padding container-fluid (jinak to uhne doprava) */
#top-filters-wrap > .container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* dropdowny pojistka z-index (aby nebyly pod sticky vrstvami) */
#top-filters-wrap .dropdown-menu{
  z-index: 3000;
}

/* ✅ portal dropdown (kdyz ho presuneme do body kvuli iOS Safari) */
/* portal menu na iOS */
.tf-portal-menu{
  position: fixed !important;
  z-index: 3000 !important;

  /* pevná výška – jednoduché a stabilní */
  max-height: 40vh !important;

  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* OBSAH */
.actors-index-row{
  padding-top: var(--content-shift);
}

/* SIDEBAR (desktop) */
.category-filters-sticky-wrap{
  position: sticky;
  top: calc(var(--topfilters-h) + var(--content-shift));
  z-index: 1010;

  max-height: calc(100vh - (var(--topfilters-h) + var(--content-shift)) - 16px);
  overflow: auto;
  padding-bottom: 8px;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.category-filters-sticky-wrap #category-filters{
  background: #fff;
}

/* ===== MOBIL ===== */
@media (max-width: 991.98px) {

  /* ✅ FIX: sticky uvnitr bootstrap .row (flex) – pojistka, aby sticky fungovalo */
  .actors-index-row > .col-md-2{
    align-self: flex-start;
  }

  #top-filters-wrap{
    overflow: hidden;
    max-height: var(--topfilters-h);
    opacity: 1;
  }
  #top-filters-wrap.mobile-ui-hidden{
    max-height: 0px;
    opacity: 0;
    pointer-events: none;
  }

  #top-filters-wrap.allow-overflow{
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .category-filters-sticky-wrap.d-lg-none{
    background: #fff;
    overflow: hidden;
    max-height: var(--mobilecats-h);
    opacity: 1;

    position: sticky !important;
    top: var(--mobilecats-top, var(--content-shift)) !important; /* 👈 */
    z-index: 1015;
  }

  .category-filters-sticky-wrap.d-lg-none.mobile-ui-hidden{
    max-height: 0px;
    opacity: 0;
    pointer-events: none;
  }
}


/* ==========================================================================
   01) Top filters – zarovnání + 1 řádek na mobilu + scroll + overflow pravidlo
   ========================================================================== */

/*
  CIL:
  - Na XL+ zarovnat "HERECKY VEK" pod "Herci" (stejne jako navbar-center-menu)
  - Muz/Zena + dropdowny zustanou v 1 radku
  - Na <XL je 1 radek + horizontal scroll
  - Odsazeni se zrusí AZ kdyz je overflow (tvé pravidlo)
*/

/* Zaklad: 1 radek (vzdy) */
.top-filters-scroll{
  display: flex;
  flex-wrap: nowrap;
  gap: .75rem;
  align-items: center;
}
/* XL+ – gap mezi LEFT/RIGHT = 0 (kvuli zarovnani na Herci) */
@media (min-width: 1200px) {
  .top-filters-scroll{
    gap: .2rem !important;
  }
}

/* Na <XL: 1 radek + horizontal scroll (ne jen do 768px) */
@media (max-width: 1199.98px) {
  .top-filters-scroll{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: .25rem;
  }

  .top-filters-scroll::-webkit-scrollbar{
    height: 6px;
  }

  /* bloky se nesmi smrstovat */
  .top-filters-scroll .top-filters-item,
  .top-filters-scroll .gender-col,
  .top-filters-scroll .filters-col{
    flex: 0 0 auto;
  }

  /* gender i dropdowny v jednom radku */
  #gender-filters{
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  #filters-row1{
    flex-wrap: nowrap !important;
    white-space: nowrap;
    gap: .75rem;
  }

  /* ❗️Pozn.: uz NEDAVAME .dropdown-menu { position:fixed } pres CSS
     - na iOS to stejne casto selze kvuli scroll containeru
     - resime portalem v JS, jen pro iPhone Safari */
}

/* Na desktopu (>=1200) overflow visible */
@media (min-width: 1200px) {
  .top-filters-scroll{
    overflow: visible;
  }
}

/* ====== XL+ "grid" simulace 2/12 + 10/12 (aby Herecky vek zacal pod Herci) ====== */
@media (min-width: 1200px) {
  #top-filters-wrap .gender-col  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  #top-filters-wrap .filters-col { flex: 0 0 83.3333%; max-width: 83.3333%; }
}

/*
  Jemne dorovnani: dropdowny (tedy "Herecky vek") musí začít stejně jako navbar menu.
  Navbar ma: .navbar-center-menu { padding-left: var(--content-grid-offset); }
  Proto to aplikujeme na #filters-row1.
*/
@media (min-width: 1200px) {
  #filters-row1{
    padding-left: var(--content-grid-offset);
  }
}

/* === presne tvoje pravidlo: odsazeni pryc AZ kdyz je overflow === */
#top-filters-wrap.is-overflowing #filters-row1{
  padding-left: 0 !important;
}

/* ==========================================================================
   02) Gender filters – zarovnání MUŽ/ŽENA s dropdowny
   ========================================================================== */

#gender-filters {
  display: flex;
  align-items: center;
}

#gender-filters .form-check-input {
  position: relative;
  top: 0px;
}

#gender-filters .form-check {
  position: relative;
  top: 2px;
}

/* ==========================================================================
   03) Active filter badges – 1 řádek + scroll + zarovnání s filtry
   ========================================================================== */

#active-filter-badges {
  position: relative;
  z-index: 50;
}

/* Active filter badges: text-reset linky na hover -> primary */
#active-filter-badges a.text-reset:hover,
#active-filter-badges a.text-reset:focus {
  color: var(--bs-primary) !important;
}

#active-filter-badges.is-empty {
  padding-top: 0 !important;
  padding-bottom: .25rem!important;
  gap: 0 !important;
  margin: 0 !important;
}

/* Active badges: 1 radek jako MUZ/ZENA + scroll kdyz se nevejde */
#active-filter-badges.active-badges-row{
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-left: var(--content-grid-offset); /* zarovnani s dropdowny */
}

/* kdyz je overflow u top filtru, tak stejny pravidlo jako pro #filters-row1 */
#top-filters-wrap.is-overflowing #active-filter-badges.active-badges-row{
  padding-left: .75rem !important;
}

/* volitelne: scrollbar mensi */
#active-filter-badges.active-badges-row::-webkit-scrollbar{
  height: 6px;
}


/* ==========================================================================
   04) Sidebar category filters – oddělovače + taxonomy layout
   ========================================================================== */

/* === Toggle button (Obory / Dovednosti / …) === */
#category-filters .category-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

/* === Chevron (desktop) === */
/* default: schovany, ale drzi misto aby layout neskakal */
#category-filters .category-chevron{
  font-size: 1rem;
  line-height: 1;

  width: 1.25rem;          /* rezervace mista vpravo */
  text-align: right;

  opacity: 0;
  transform: rotate(180deg); /* ⬆️ ukazuje NAHORU */
  
  transition: opacity 120ms ease; /* jen fade, zadna rotace */
}

/* zobrazi se jen kdyz je collapse otevreny */
#category-filters .category-toggle[aria-expanded="true"] .category-chevron{
  opacity: 1;
}

/* === Oddelovace mezi sekcemi === */
#category-filters > div{
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: .75rem;
  margin-bottom: .75rem;
}

#category-filters > div:last-child{
  border-bottom: none;
}

/* === Nadpisy sekci – uplne bez ramecku === */
#category-filters > .mb-3 > button.btn{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* focus / active pojistky */
#category-filters > .mb-3 > button.btn:focus,
#category-filters > .mb-3 > button.btn:focus-visible,
#category-filters > .mb-3 > button.btn:active,
#category-filters > .mb-3 > button.btn:active:focus,
#category-filters > .mb-3 > button.btn:active:focus-visible{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* === Rozbaleny obsah: pevna vyska + scroll === */
#category-filters .taxonomy-scroll{
  max-height: 250px;
  overflow: auto;
  padding-right: 6px; /* prostor pro scrollbar */
}

/* === Layout taxonomy polozek === */
#category-filters .taxonomy-flow{
  display: block;
}

/* jednotlive polozky */
#category-filters .taxonomy-flow .taxonomy-item{
  margin: 0;
  width: auto;

  display: flex;
  align-items: center;
  gap: 6px;
}

#category-filters .taxonomy-flow .form-check-input{
  margin-top: 0;
}

/* label muze byt dlouhy -> zalomi se, nerozbi layout */
#category-filters .taxonomy-flow .form-check-label{
  line-height: 1.2;
  word-break: break-word;
}



/* ==========================================================================
   05) Multi-select (filters) + width measurers
   ========================================================================== */

#width-measurer {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: nowrap;
  font: inherit;
  padding: 0;
  margin: 0;
}

.auto-width-select {
  border: none;
  width: auto;
  min-width: 0;
  padding-right: 0.5rem;
  inline-size: max-content;
  box-sizing: border-box;
  background-clip: padding-box;
}

.min-w-250 { min-width: 250px; }

.multi-select .ms-button { display:inline-flex; align-items:center; gap:.5rem; }
.multi-select .dropdown-menu { max-height: 320px; overflow:auto; }

/* Multi-select caret & prostor pro něj */
.multi-select { position: relative; }
.multi-select .ms-button {
  white-space: nowrap;
  padding-right: 1rem; /* místo pro caret, aby nepřekrýval text */
  position: relative;
  top: 1px;
}

.multi-select .dropdown-toggle::after {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Pro šířky z JS */
#ms-width-measurer {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  left: -9999px;
  top: -9999px;
}

/* ==========================================================================
   06) Search input (actors index)
   ========================================================================== */

input#search,
input#search::placeholder {
  color: var(--bs-primary);
}