@layer components {
  .sl-attendance {
    @apply space-y-6;
  }

  .sl-attendance__hero {
    @apply grid gap-5 rounded-[24px] border border-[#dfe7f6] bg-white p-5 md:p-7 xl:grid-cols-[minmax(0,1fr)_320px];
  }

  .sl-attendance__hero-copy {
    @apply min-w-0;
  }

  .sl-attendance__eyebrow {
    @apply mb-2 text-[12px] font-extrabold uppercase tracking-[0.22em] text-[#4d80d0];
  }

  .sl-attendance__hero h1 {
    @apply m-0 text-[30px] font-black leading-[1.08] text-[#1f2c46] md:text-[40px];
  }

  .sl-attendance__lede {
    @apply mt-3 max-w-[760px] text-[15px] leading-7 text-[#5d6880];
  }

  .sl-attendance__hero-metrics {
    @apply grid gap-3;
  }

  .sl-attendance__hero-metric {
    @apply rounded-[20px] border border-[rgba(255,255,255,0.8)] bg-white/80 p-4;
    box-shadow: 0 18px 34px rgba(83, 100, 136, 0.08);
  }

  .sl-attendance__hero-metric span {
    @apply block text-[12px] font-bold uppercase tracking-[0.14em] text-[#7a86a1];
  }

  .sl-attendance__hero-metric strong {
    @apply mt-3 block text-[30px] font-black leading-none text-[#24324b];
  }

  .sl-attendance__hero-metric small {
    @apply mt-2 block text-[13px] font-semibold text-[#6c7892];
    overflow-wrap: anywhere;
  }

  .sl-attendance__filters {
    @apply grid gap-4 rounded-[22px] border border-[#e7edf8] bg-white p-4 md:grid-cols-2 xl:grid-cols-[minmax(0,1.2fr)_260px_180px_auto];
    align-items: end;
    box-shadow: 0 12px 28px rgba(92, 111, 149, 0.07);
  }

  .sl-attendance__filters .sl-materials-filter-field {
    @apply justify-end;
  }

  .sl-attendance__filters .sl-materials-actions {
    @apply self-end;
  }

  .sl-attendance__grid {
    @apply grid gap-6 xl:grid-cols-[1.15fr_0.85fr];
  }

  .sl-attendance__panel {
    @apply h-full;
  }

  .sl-attendance__list,
  .sl-attendance-ranking {
    @apply space-y-4;
  }

  .sl-attendance-ranking__legend {
    @apply mb-4 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-[16px] border border-[#e5ecf8] bg-[#fbfcff] px-4 py-3 text-[12px] font-bold text-[#60708c];
  }

  .sl-attendance-ranking__legend span,
  .sl-attendance-ranking__meta span {
    @apply inline-flex items-center gap-2;
  }

  .sl-attendance-ranking__legend i,
  .sl-attendance-ranking__meta i {
    @apply h-2.5 w-2.5 shrink-0 rounded-full;
  }

  .sl-attendance-ranking__legend i.is-presence,
  .sl-attendance-ranking__meta i.is-presence {
    @apply bg-[#53bd7d];
  }

  .sl-attendance-ranking__legend i.is-absence,
  .sl-attendance-ranking__meta i.is-absence {
    @apply bg-[#dd5f58];
  }

  .sl-attendance-ranking__legend .is-muted {
    @apply text-[#9aa6ba];
  }

  .sl-attendance-ranking__legend .is-muted i {
    @apply bg-[#e8a33a];
  }

  .sl-attendance-session {
    @apply flex flex-col gap-4 rounded-[18px] border border-[#e5ecf8] bg-[#fbfcff] p-4 md:flex-row md:items-center md:justify-between;
  }

  .sl-attendance-session__copy {
    @apply min-w-0;
  }

  .sl-attendance-session__copy strong {
    @apply block text-[16px] font-extrabold text-[#253550];
    overflow-wrap: anywhere;
  }

  .sl-attendance-session__copy p {
    @apply mt-1 mb-0 text-[14px] font-semibold text-[#4d80d0];
  }

  .sl-attendance-session__copy span {
    @apply mt-2 block text-[12px] font-semibold uppercase tracking-[0.14em] text-[#97a3bb];
    overflow-wrap: anywhere;
  }

  .sl-inline-action--attendance {
    @apply min-w-[132px];
  }

  .sl-attendance-ranking__item {
    @apply rounded-[18px] border border-[#e5ecf8] bg-[#fbfcff] p-4;
  }

  .sl-attendance-ranking__topline {
    @apply flex items-start justify-between gap-3;
  }

  .sl-attendance-ranking__identity {
    @apply flex min-w-0 items-center gap-3;
  }

  .sl-attendance-ranking__avatar {
    @apply flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#eef4ff] text-[14px] font-extrabold uppercase text-[#4d80d0];
  }

  .sl-attendance-ranking__avatar img {
    @apply h-full w-full object-contain;
  }

  .sl-attendance-ranking__identity strong {
    @apply block text-[15px] font-extrabold text-[#24324b];
    overflow-wrap: anywhere;
  }

  .sl-attendance-ranking__identity span {
    @apply mt-1 block text-[12px] font-medium text-[#7f8aa2];
    overflow-wrap: anywhere;
  }

  .sl-attendance-ranking__percent {
    @apply text-[16px] font-black text-[#1f8a4d];
  }

  .sl-attendance-ranking__bar {
    @apply mt-4 flex h-4 overflow-hidden rounded-full bg-[#edf2fb];
  }

  .sl-attendance-ranking__bar span {
    @apply flex h-full min-w-0 items-center justify-end px-1.5 text-right text-[10px] font-black leading-none text-white;
  }

  .sl-attendance-ranking__bar span:first-child {
    @apply rounded-l-full;
  }

  .sl-attendance-ranking__bar span:last-child {
    @apply rounded-r-full;
  }

  .sl-attendance-ranking__bar .is-presence {
    @apply bg-[#53bd7d];
  }

  .sl-attendance-ranking__bar .is-absence {
    @apply bg-[#dd5f58];
  }

  .sl-attendance-ranking__bar small {
    @apply block truncate;
  }

  .sl-attendance-ranking__meta {
    @apply mt-3 flex flex-wrap gap-x-4 gap-y-2 text-[12px] font-semibold text-[#7f8aa2];
  }

  .sl-attendance__empty {
    @apply rounded-[18px] border border-dashed border-[#dce3f2] bg-[#fbfcff] px-5 py-8 text-center;
  }

  .sl-attendance__empty.is-compact {
    @apply px-4 py-6;
  }

  .sl-attendance__empty h2 {
    @apply m-0 text-[20px] font-extrabold text-[#24324b];
  }

  .sl-attendance__empty p {
    @apply mt-3 mb-0 text-[14px] leading-6 text-[#6c7892];
  }

  @media (max-width: 1023px) {
    .sl-attendance__filters {
      @apply grid-cols-1;
    }

    .sl-attendance__filters .sl-materials-actions {
      @apply w-full justify-stretch;
    }

    .sl-attendance__filters .sl-materials-button,
    .sl-attendance__filters .sl-materials-button.is-primary {
      @apply w-full;
      min-width: 0;
    }

    .sl-attendance__grid {
      @apply grid-cols-1;
    }
  }

  @media (max-width: 767px) {
    .sl-attendance {
      @apply space-y-5;
    }

    .sl-attendance__hero {
      @apply rounded-[20px] p-4;
    }

    .sl-attendance__hero h1 {
      @apply text-[28px];
    }

    .sl-attendance__lede {
      @apply text-[14px] leading-6;
    }

    .sl-attendance__hero-metric strong {
      @apply text-[26px];
    }

    .sl-attendance__filters {
      @apply rounded-[18px] p-3;
    }

    .sl-attendance-session {
      @apply gap-3 p-3;
    }

    .sl-attendance-session__copy p {
      @apply text-[13px];
      overflow-wrap: anywhere;
    }

    .sl-inline-action--attendance {
      @apply min-w-0;
    }

    .sl-attendance-ranking__item {
      @apply p-3;
    }

    .sl-attendance-ranking__topline {
      @apply flex-col;
    }

    .sl-attendance-ranking__percent {
      @apply text-[15px];
    }
  }

  @media (max-width: 479px) {
    .sl-attendance__hero {
      @apply gap-4 p-3.5;
    }

    .sl-attendance__hero h1 {
      @apply text-[24px];
    }

    .sl-attendance__hero-metric {
      @apply p-3.5;
    }

    .sl-attendance__hero-metric strong {
      @apply text-[22px];
    }

    .sl-attendance-ranking__identity {
      @apply items-start;
    }
  }
}