/* --- SÍUPILLUR ("filter pills") ---

   Röð af litlum, kringlóttum tökkum sem sía lista: "Allir", "Mætt", "Fjarvist"
   o.s.frv. Smellt á pillu kveikir/slekkur á síunni; talan inni í henni segir
   hve margt fellur undir hana.

   BYGGT Á MYNSTRINU ÚR PQTRACK (`public/css/pq_tables.css`, "Billing list -
   filter pills"), EN EKKI AFRITAÐ ÞAÐAN. Munurinn skiptir máli:

   PQTrack skilgreinir EINA REGLU Á HVERJA STÖÐU - `.pill-billable.active`,
   `.pill-needs_review.active`, `.pill-approved.active` og svo framvegis, hver
   með sínum þremur handskrifuðu litum. Það gengur upp þar, því staðirnir eru
   fastur listi sem breytist sjaldan og skólinn hefur eitt fast þema.

   HÉR GENGUR ÞAÐ EKKI, af tveimur ástæðum:
     1. Tónlistarskólinn er MEÐ LITAÞEMA-VAL (5 litir + sérsniðinn, sjá
        theme.css). Handskrifaðir litir myndu sitja fastir á bláu þótt
        notandinn veldi grænt.
     2. Síurnar verða margar og ólíkar (mæting, skólar, fög, árgangar). Ný
        regla í CSS fyrir hverja einustu pillu væri skjal sem vex endalaust.

   Í STAÐINN: EIN regla fyrir virka pillu, og liturinn kemur úr breytunni
   `--pill-accent`. Hún er sjálfgefið `--theme-primary`, svo pillur fylgja
   þemanu sjálfkrafa og ekkert þarf að gera. Pilla sem á að bera SÍNA EIGIN
   merkingu (grænt = mætti, rautt = fjarvist) fær breytuna setta - annaðhvort
   með tilbúnum flokki hér neðst eða beint í `style`-eigindinni. Bakgrunnur,
   rammi og textalitur reiknast allir út frá henni með `color-mix()`, svo einn
   litur dugar til að skilgreina heila pillu.

   MARKUP - pillan er TAKKI, ekki <div>:

     <div class="filter-bar">
       <div class="filter-pills">
         <button type="button" class="filter-pill active" aria-pressed="true">
           Allir <span class="pill-count">24</span>
         </button>
         <button type="button" class="filter-pill pill-green" aria-pressed="false">
           <span class="pill-dot"></span>Mætt <span class="pill-count">18</span>
         </button>
       </div>
     </div>

   <button> af því hún er aðgerð: lyklaborð kemst í hana, bil/enter virkja
   hana og skjálesarar lesa hana rétt. `aria-pressed` segir hvort sían sé á -
   `.active`-flokkurinn einn og sér sést ekki þeim sem nota skjálesara.
   Handritið sem setur `.active` á að setja `aria-pressed` í leiðinni. */

.filter-bar {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
}

/* --- HAUSINN: SAMANTEKT VINSTRA MEGIN, ÖR HÆGRA MEGIN ---

   Flex-röð en ekki `position: absolute` á örinni. Örin situr hvort eð er í
   horninu, en með flex getur samantektin ("Síað: Hóptími · Fellaskóli") vaxið
   í tvær línur á síma án þess að lenda undir henni. Absolút staðsett ör hefði
   kallað á handreiknað `padding-right` sem stemmir svo ekki við lengri texta. */
.filter-bar-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* SÉST EINGÖNGU ÞEGAR STIKAN ER LOKUÐ (sjá initFilterBarToggle í
   pills-common.js). Samanbrotin stika með kveikta síu er versta útgáfan af
   síuðum lista: stuttur listi og ekkert sem segir af hverju. Þessi lína er
   svarið - hún má vera dauf, en hún má ekki vanta. */
.filter-bar-summary {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #607d8b;
}

/* Örin. Ýtt í hornið með margin-left:auto svo hún sitji hægra megin hvort sem
   samantektin er til staðar eða ekki. */
.filter-bar-toggle {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 6px;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  color: #607d8b;
  cursor: pointer;
}

.filter-bar-toggle:hover {
  color: var(--theme-primary, #185ABD);
}

.filter-bar-toggle:focus-visible {
  outline: 2px solid var(--theme-primary, #185ABD);
  outline-offset: 2px;
  border-radius: 4px;
}

/* EIN ÖR SEM SNÝST, EKKI TVÖ TÁKN. Táknið í markup-inu er ▾ og snýst í ▴
   þegar stikan er opin. Að skipta um textainnihald við smell væri annar
   staður þar sem staðan getur orðið ósamstíga aria-expanded; hér er snúningur
   og aðgengisstaðan bæði leidd af sama eiginda. */
.filter-bar-chevron {
  display: inline-block;
  transition: transform 0.15s;
}

.filter-bar-toggle[aria-expanded="true"] .filter-bar-chevron {
  transform: rotate(180deg);
}

/* Bilið milli hauss og pilluraða. Kemur á hausinn en ekki á fyrstu röðina,
   svo lokuð stika (þar sem engin röð er sýnileg) fái ekki tómt bil undir sér. */
.filter-bar-head:not(:last-child) {
  margin-bottom: 0.5rem;
}

/* Lítill merkimiði yfir pilluröð ("Sía eftir:"). Valfrjáls - ein röð af
   pillum með augljósum heitum þarf hann ekki. */
.filter-bar-title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #607d8b;
}

/* EIN VÍDD = EIN RÖÐ. Síða sem síar eftir fleiru en einu (Fög sía eftir
   Tegund, Skóla OG Tónlistaskóla) fær eina `.filter-row` á hverja vídd, hver
   með sinn eigin `.filter-bar-title` og sína eigin virku pillu. Allar pillur
   í einni bendu væri röð þar sem "Hóptími" og "Fellaskóli" líta eins út og
   ekkert segir að þær þrengi hvor sinn hlutinn. */
.filter-row + .filter-row {
  margin-top: 0.7rem;
}

/* BROTNAR NIÐUR Í NÆSTU LÍNU, skrunar ekki lárétt. Lárétt skrun felur pillur
   sem enginn veit að eru til; í mjóum farsímaglugga er betra að röðin verði
   tveggja eða þriggja lína há. */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* --- [hidden] VERÐUR AÐ VINNA, OG GERIR ÞAÐ EKKI AF SJÁLFU SÉR ---

   `hidden`-eigindin felur með `display: none` úr SJÁLFGEFNA stílblaði
   vafrans. Regla sem við skrifum sjálf (`.filter-pills { display: flex }`)
   hefur hærra vægi og yfirskrifar hana ÓHÁÐ sértækni - reitur sem á að vera
   falinn stendur þá sýnilegur og tómur.

   Þetta sama villumynstur hefur þegar komið upp á tveimur stöðum í þessum
   kóðabanka (`.registration-draft-bar`, `.inline-form.edit-mode-only`).
   Reglan hér er varnagli fyrir allt pillukerfið í einu - HÚN MÁ EKKI HVERFA.
   `.filter-bar` og `.filter-row` eru með í upptalningunni þótt þau séu
   `display: block` í dag, svo þau séu varin ef einhver gefur þeim flex
   seinna. */
.filter-bar[hidden],
.filter-bar-body[hidden],
.filter-bar-summary[hidden],
.filter-row[hidden],
.filter-pills[hidden] {
  display: none;
}

.filter-pill {
  /* SJÁLFGEFNI LITURINN ER ÞEMALITURINN. Pilla sem á að bera sína eigin
     merkingu skrifar yfir þessa einu breytu - sjá flokkana neðst. */
  --pill-accent: var(--theme-primary, #185ABD);

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

  /* font: inherit FYRST - takkar erfa ekki letur síðunnar sjálfkrafa, og
     styttingin núllstillir stærð/þyngd, svo þær verða að koma á eftir. */
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;

  padding: 6px 14px;
  border: 1.5px solid #d9d9d9;
  border-radius: 999px;
  background: #fff;
  color: #5f6368;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.filter-pill:hover {
  border-color: var(--pill-accent);
  color: var(--theme-text-on-light, #2b2b2b);
}

/* SÝNILEGUR FÓKUSHRINGUR. Sjálfgefni hringur vafrans hverfur á kringlóttum
   fleti með eigin ramma; án hans veit sá sem notar lyklaborð ekki hvar hann er.
   :focus-visible en ekki :focus - músarsmellur á ekki að skilja eftir hring. */
.filter-pill:focus-visible {
  outline: 2px solid var(--pill-accent);
  outline-offset: 2px;
}

.filter-pill[disabled] {
  opacity: 0.5;
  cursor: default;
}

.filter-pill[disabled]:hover {
  border-color: #d9d9d9;
  color: #5f6368;
}

/* VIRK PILLA - EINA REGLAN, óháð því hvaða sía þetta er.

   Allir þrír litirnir eru reiknaðir út frá --pill-accent:
     bakgrunnur  12% af litnum  - nógu daufur til að svartur texti lesist
     rammi       liturinn sjálfur
     texti       70% af litnum + svart - dekkri en ramminn, læsilegur á
                 ljósa bakgrunninum jafnvel þegar liturinn sjálfur er ljós
                 (gult er versta tilvikið og ræður þessu hlutfalli). */
.filter-pill.active {
  background: color-mix(in srgb, var(--pill-accent) 12%, white 88%);
  border-color: var(--pill-accent);
  color: color-mix(in srgb, var(--pill-accent) 70%, black 30%);
  font-weight: 600;
}

/* TALAN INNI Í PILLUNNI. Dauf þegar sían er af, fyllt þegar hún er á - það er
   það sem gerir virku pilluna sýnilega úr fjarlægð, frekar en ramminn einn. */
.pill-count {
  background: #eee;
  color: #5f6368;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}

.filter-pill.active .pill-count {
  background: var(--pill-accent);
  color: #fff;
}

/* LITAPUNKTUR fyrir framan heitið - fyrir pillur sem bera merkingu sem liturinn
   einn segir (mætt/fjarvist). Sést líka þegar sían er AF, ólíkt rammanum, svo
   kennarinn þekki röðina án þess að þurfa að kveikja á neinu. */
.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pill-accent);
  flex: 0 0 auto;
}

/* --- Tilbúnir litir ---
   Sækja beint í grænt/gult/rautt kerfið úr base.css frekar en að skilgreina ný
   gildi. Það kerfi lýsir í dag hvenær nemandi kemst í tíma; pillurnar nota sömu
   tóna svo sami litur þýði það sama alls staðar á síðunni. */
.filter-pill.pill-green {
  --pill-accent: var(--color-graent-border, #66bb6a);
}

.filter-pill.pill-yellow {
  --pill-accent: var(--color-gult-border, #ffca28);
}

.filter-pill.pill-red {
  --pill-accent: var(--color-raett-border, #ef5350);
}

/* Hlutlaus grár - fyrir "ekkert skráð"/"óflokkað", sem er fjarvera upplýsinga
   en ekki staða sem á skilið eigin lit. */
.filter-pill.pill-muted {
  --pill-accent: #9aa0a6;
}

/* --- "HREINSA SÍU" ---

   ÖRYGGISVENTILL, ekki þægindi. Sía sem er geymd í localStorage lifir af
   endurhleðslu og lokun vafrans: notandi sem síaði á einn skóla í síðustu viku
   opnar listann í dag og sér hann hálfan. Þessi takki er svarið við "hvar eru
   hin fögin?" - hann er sýnilegur EINGÖNGU þegar eitthvað er raunverulega
   kveikt (sjá subjects.js), svo hann bæti engu við óspjallaða síðu.

   Hlédrægt útlit af ásettu ráði: þetta er afturköllun, ekki aðgerð sem á að
   keppa við pillurnar sjálfar um athygli. */
.filter-bar-reset {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  color: #607d8b;
  text-decoration: underline;
  cursor: pointer;
}

.filter-bar-reset:hover {
  color: var(--theme-primary, #185ABD);
}

.filter-bar-reset:focus-visible {
  outline: 2px solid var(--theme-primary, #185ABD);
  outline-offset: 2px;
}

.filter-bar-reset[hidden] {
  display: none;
}

/* Farsími: sömu pillur, stærri snertiflötur. 6px lóðrétt er nóg fyrir mús en
   of lítið fyrir fingur. */
@media (max-width: 480px) {
  .filter-bar {
    padding: 0.6rem 0.7rem;
  }

  .filter-pill {
    padding: 9px 14px;
  }

  /* Takkinn er texti og fær engan stærri flöt af pillu-reglunni hér fyrir
     ofan - hann þarf sinn eigin snertiflöt. */
  .filter-bar-reset {
    padding: 6px 0;
  }
}