/* === athleko PT — themed colors for groups + card bands === */

/* Palette (tweak as you like) */
:root{
  --col-run:   #ffda6a;  /* Corrida - orange */
  --col-bike:  #adb5bd;  /* Ciclismo - teal  */
  --col-trail: #4dd4ac;  /* Trilhos - green */
  --col-tri:   #F54927;  /* Triatlo - purple */
  --col-other: #0dcaf0;  /* Outros - pink */
}

/* Colorize pills by group */
.group-row.g-run   .group-pill span { border-color: var(--col-run);   color: var(--col-run); }
.group-row.g-bike  .group-pill span { border-color: var(--col-bike);  color: var(--col-bike); }
.group-row.g-trail .group-pill span { border-color: var(--col-trail); color: var(--col-trail); }
.group-row.g-tri   .group-pill span { border-color: var(--col-tri);   color: var(--col-tri); }
.group-row.g-other .group-pill span { border-color: var(--col-other); color: var(--col-other); }


/* em vez de display:none; */
.group-row .group-pill input{
  display:inline-block;
  width:16px;
  height:16px;
  margin-right:.1rem;
  vertical-align:middle;
}

/* Card top color band */
.card-event { position:relative; overflow:hidden; border-radius:12px; }
.card-event .card-band{
  position:absolute; left:0; top:0; width:100%; height:6px;
  border-top-left-radius:12px; border-top-right-radius:12px;
}
.band-run{   background: var(--col-run); }
.band-bike{  background: var(--col-bike); }
.band-trail{ background: var(--col-trail); }
.band-tri{   background: var(--col-tri); }
.band-other{ background: var(--col-other); }

/* --- Fix: texto branco e fundo com a cor do grupo quando selecionado --- */

/* 1) expõe a cor do grupo via CSS var no wrapper */
.group-row.g-run   { --gcol: var(--col-run); }
.group-row.g-bike  { --gcol: var(--col-bike); }
.group-row.g-trail { --gcol: var(--col-trail); }
.group-row.g-tri   { --gcol: var(--col-tri); }
.group-row.g-other { --gcol: var(--col-other); }

/* 2) estado normal (não selecionado) */
.group-row .group-pill span{
  color: var(--gcol, #9aa4af) !important;
  border-color: var(--gcol, #2a2f36) !important;
  background: transparent !important;
}

/* 3) estado selecionado */
.group-row .group-pill input:checked + span{
  background-color: var(--gcol, #666) !important;
  color: #000 !important;
  border-color: transparent !important;
}

/* ligar cada grupo à sua cor (se ainda não estiver no ficheiro) */
.group-row.g-run   { --gcol: var(--col-run); }
.group-row.g-bike  { --gcol: var(--col-bike); }
.group-row.g-trail { --gcol: var(--col-trail); }
.group-row.g-tri   { --gcol: var(--col-tri); }
.group-row.g-other { --gcol: var(--col-other); }

/* barra colorida à esquerda do título do grupo */
.group-row .group-left{
  display:flex; align-items:center; gap:.5rem;
}
.group-row .group-left::before{
  content:"";
  display:inline-block;
  width:0px;                /* largura da “banda” */
  height:22px;               /* altura da “banda” */
  border-radius:6px;
  background: var(--gcol, #666);   /* <<< COR DO GRUPO */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
}

/* (opcional) manter o texto do título branco, sem herdar a cor do grupo */
.group-row .title-text{ color:#fff; }