@charset "UTF-8";

#attendance-list {
  thead {
    z-index: 1;
    position: sticky;
    top: 0rem;

    th {
      background-color: color-mix(in oklab, transparent 30%, var(--pico-background-color));
      backdrop-filter: saturate(180%) var(--pico-modal-overlay-backdrop-filter);
    }
  }

  td>input[type='checkbox']:not([role='switch']) {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 2rem;
  }

  td>button {
    font-size: 2rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    line-height: 1;
  }

  tr.earned-card>td {
    background-color: color-mix(in oklab, lime 35%, transparent);
  }

  td.name-col {
    font-size: 1.25rem;
  }

  td.points-col,
  #headcount {
    font-size: 1.5rem;
    font-family: monospace;
  }

  td.points-col {
    display: grid;
    grid-template-columns: 2rem 1rem;

    div.points-val {
      grid-column: 1 / 1;
      max-width: fit-content;
      padding: 1rem 0rem;
    }

    div.points-ctrl {
      grid-column: 2 / 2;
      padding: 0rem 1rem;

      button {
        padding: 0 0.5rem;
        font-size: 1.25rem;
      }
    }
  }

  input[type='checkbox'].hidden-students {
    position: absolute;
    transform: translateX(50%) translateY(50%);
  }



  td>fieldset[role='group'] {
    margin-bottom: 0;
  }


  tr.edit-student td,
  tr.new-student td {
    background-color: color-mix(in oklab, cyan 25%, transparent);
    animation-name: flash-cyan;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
  }

  tr.blank-row {
    opacity: 0;
  }

}

@keyframes flash-cyan {
  from {
    background-color: cyan;
  }

  to {
    background-color: color-mix(in oklab, cyan 25%, transparent);
  }
}

td.presence-col>input[type=checkbox]:checked,
td.bible-col>input[type=checkbox]:checked,
button.save-button,
button.save-button:is(:hover, :active, :focus) {
  --pico-background-color: limegreen;
  --pico-border-color: limegreen;
}

.sticky-footer {
  position: sticky;
  z-index: 5;
  bottom: 0%;
  background-color: color-mix(in oklab, transparent 30%, var(--pico-background-color));
  backdrop-filter: saturate(180%) var(--pico-modal-overlay-backdrop-filter);
  padding-block: 0;
  padding-inline: 1rem;

  input[type='search'] {
    width: 40vw;
  }

}

.hint {
  background-image: var(--pico-icon-info);
  padding-inline-start: 1.2rem;
  background-position: 0rem center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
}