@layer components {
  .sl-materials-tabs {
    @apply absolute left-6 top-0 z-10 flex -translate-y-[calc(100%-1px)] items-end gap-2;
  }

  .sl-materials-tab {
    @apply inline-flex h-10 items-center rounded-[10px_10px_0_0] border bg-white px-4 text-[14px] font-semibold transition;
    border-color: var(--sl-border);
    color: var(--sl-text);
    position: relative;
    z-index: 1;
  }

  .sl-materials-tab.is-active {
    @apply text-white;
    border-color: var(--sl-primary);
    background: var(--sl-primary);
    box-shadow: none;
  }

  .sl-materials-tab:hover {
    border-color: var(--sl-primary);
    background: var(--sl-primary);
    color: #ffffff;
  }

  .sl-materials-surface {
    @apply relative mt-[25px] min-w-0 overflow-visible rounded-[28px] border bg-white/75 p-4 pt-6 md:p-5 md:pt-6;
    border-color: rgba(202, 217, 235, 0.6);
    box-shadow: 0 18px 42px rgba(26, 63, 120, 0.08);
  }

  .sl-materials-toolbar {
    @apply flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between;
  }

  .sl-materials-filters {
    @apply grid gap-4 md:grid-cols-2 xl:grid-cols-4;
    flex: 1 1 auto;
  }

  .sl-materials-toolbar__actions {
    @apply flex flex-wrap items-center gap-3 xl:justify-end;
  }

  @media (min-width: 1280px) {
    .sl-materials-toolbar {
      gap: 10px;
    }

    .sl-materials-filters {
      gap: 12px;
    }

    .sl-materials-filters--materials {
      grid-template-columns:
        minmax(110px, 1fr) minmax(110px, 1fr) minmax(110px, 1fr)
        minmax(110px, 1fr);
    }

    .sl-materials-toolbar__actions {
      flex: 0 0 auto;
      flex-wrap: nowrap;
      align-self: flex-end;
      gap: 10px;
      justify-content: flex-end;
    }

    .sl-materials-toolbar__actions .sl-materials-button {
      min-width: 116px;
      white-space: nowrap;
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  @media (min-width: 1280px) {
    .sl-materials-toolbar__actions .sl-materials-button--primary-action {
      min-width: 50px;
    }
  }

  .sl-materials-filter-field {
    @apply min-w-0 flex flex-col gap-2;
  }

  .sl-materials-filter-field label {
    @apply text-[14px] font-semibold text-[var(--sl-text-strong)];
  }

  .sl-materials-control {
    @apply h-[40px] w-full min-w-0 rounded-[10px] border bg-white px-4 text-[14px] font-medium text-[var(--sl-text)] outline-none transition focus:border-[var(--sl-primary)] focus:ring-4 focus:ring-[rgba(31,95,170,0.12)];
    border-color: var(--sl-border);
  }

  .sl-materials-control--textarea {
    @apply h-[118px] resize-none py-3;
  }

  .sl-materials-button {
    @apply inline-flex h-[40px] items-center justify-center gap-2 rounded-[10px] px-5 text-[14px] font-semibold transition;
  }

  .sl-materials-button.is-light {
    @apply border bg-white text-[var(--sl-primary)] transition hover:bg-[var(--sl-surface-soft)];
    border-color: var(--sl-border);
  }

  .sl-materials-button.is-primary {
    @apply min-w-[156px] text-white hover:brightness-105;
    background: var(--sl-primary);
    box-shadow: none;
  }

  .sl-materials-button.is-disabled,
  .sl-materials-button:disabled {
    @apply cursor-not-allowed opacity-60;
    pointer-events: none;
  }

  .sl-materials-button svg {
    @apply h-4 w-4 shrink-0;
  }

  .sl-materials-button__badge {
    @apply h-2 w-2 rounded-full bg-[var(--sl-accent)];
  }

  .sl-advanced-search-grid {
    @apply grid gap-4 md:grid-cols-2;
  }

  .sl-advanced-search-grid.is-dates {
    @apply md:max-w-[420px];
  }

  .sl-checkbox-field {
    @apply flex items-start gap-3 rounded-[14px] border bg-[#f8fbff] px-4 py-3;
    border-color: var(--sl-border-soft);
  }

  .sl-checkbox-field input {
    @apply mt-1 h-4 w-4 rounded border-[#bfcce5] text-[var(--sl-primary)] focus:ring-[var(--sl-primary)];
  }

  .sl-checkbox-field span {
    @apply flex min-w-0 flex-1 flex-col;
  }

  .sl-checkbox-field strong {
    @apply text-[14px] font-semibold text-[#30415e];
  }

  .sl-checkbox-field small {
    @apply mt-1 text-[12px] leading-5 text-[#7b869c];
  }

  .sl-modal-open {
    overflow: hidden;
  }

  .sl-modal {
    @apply fixed inset-0 z-[200] hidden items-center justify-center p-4;
  }

  .sl-modal.is-open {
    @apply flex;
  }

  .sl-modal__backdrop {
    @apply fixed inset-0 border-0 p-0;
    background:
      radial-gradient(
        circle at top center,
        rgba(22, 152, 176, 0.12),
        transparent 34%
      ),
      rgba(15, 23, 42, 0.44);
    backdrop-filter: blur(8px) saturate(0.92);
    -webkit-backdrop-filter: blur(8px) saturate(0.92);
  }

  .sl-modal__dialog {
    @apply relative z-[1] w-full;
    animation: sl-modal-dialog-enter 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .sl-modal__dialog--narrow {
    max-width: 760px;
  }

  .sl-modal__dialog--filters {
    max-width: 700px;
  }

  .sl-modal__dialog--compact {
    max-width: 560px;
  }

  .sl-modal__dialog--micro {
    max-width: 272px;
  }

  .sl-modal__panel {
    @apply overflow-hidden rounded-[20px] border border-[rgba(219,229,246,0.88)] bg-[rgba(255,255,255,0.96)] shadow-[0_28px_90px_rgba(15,23,42,0.26)];
    box-shadow:
      0 28px 90px rgba(15, 23, 42, 0.26),
      0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  }

  .sl-modal__header {
    @apply flex items-start justify-between gap-4 border-b border-[#e5ecf8] px-5 py-4;
  }

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

  .sl-modal__header-copy p {
    @apply mt-1 text-[13px] text-[#7c879b];
  }

  .sl-modal__close {
    @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-[#dde5f4] bg-white text-[#62708a] transition hover:border-[#c7d3ec] hover:bg-[#f7f9ff] hover:text-[#3f5171];
  }

  .sl-modal__close svg {
    @apply h-4 w-4;
  }

  .sl-modal__body {
    @apply px-5 py-5;
  }

  .sl-modal__body--compact {
    @apply px-0 py-0;
  }

  .sl-modal__footer {
    @apply flex flex-wrap items-center justify-end gap-3 border-t border-[#e5ecf8] bg-[#fbfcff] px-5 py-4;
  }

  .sl-modal__dialog--filters .sl-modal__header {
    @apply px-5 py-3.5;
  }

  .sl-modal__dialog--filters .sl-modal__header-copy h2 {
    @apply text-[17px];
  }

  .sl-modal__dialog--filters .sl-modal__body {
    @apply px-5 py-4;
  }

  .sl-modal__dialog--filters .sl-modal__footer {
    @apply px-5 py-3.5;
  }

  .sl-modal__dialog--filters .sl-checkbox-field {
    @apply px-4 py-2.5;
  }

  .sl-modal__dialog--filters .sl-checkbox-field small {
    @apply leading-4;
  }

  .sl-modal__dialog--filters .sl-materials-control--textarea {
    @apply h-[96px];
  }

  @keyframes sl-modal-dialog-enter {
    0% {
      opacity: 0;
      transform: translateY(16px) scale(0.985);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .sl-materials-table-card {
    @apply relative z-10 mt-2 max-w-full overflow-visible rounded-[14px] border bg-white;
    border-color: rgba(202, 217, 235, 0.6);
    box-shadow: 0 12px 28px rgba(26, 63, 120, 0.05);
  }

  .sl-materials-table-card__header {
    @apply border-b px-4 py-4;
    border-color: var(--sl-border-soft);
    background: linear-gradient(180deg, #fbfdff 0%, #f4f9ff 100%);
  }

  .sl-materials-table-card__header h2 {
    @apply m-0 text-[16px] font-extrabold text-[var(--sl-primary)];
  }

  .sl-materials-table-card__header p {
    @apply mt-1 text-[13px] font-medium text-[#8a93a6];
  }

  .sl-materials-table {
    @apply min-w-full border-collapse;
  }

  .sl-meetings-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
  }

  .sl-materials-table thead th {
    @apply border-b px-4 py-3 text-left text-[12px] font-semibold text-[#7e8fa8];
    border-color: var(--sl-border-soft);
  }

  .sl-materials-table tbody td {
    @apply border-b px-4 py-3 text-[13px] font-medium text-[#62708a] transition-colors duration-150 ease-out;
    border-color: #edf2f8;
  }

  .sl-materials-table tbody tr {
    @apply transition-colors duration-150 ease-out;
  }

  .sl-materials-table tbody tr:hover td {
    background: linear-gradient(
      90deg,
      rgba(31, 95, 170, 0.04),
      rgba(22, 152, 176, 0.04)
    );
  }

  .sl-materials-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--sl-secondary);
  }

  .sl-materials-table tbody tr:hover td strong {
    color: #243b63;
  }

  .sl-materials-table tbody tr:hover td span,
  .sl-materials-table tbody tr:hover td,
  .sl-materials-table tbody tr:hover .sl-meetings-table__muted {
    color: #55657f;
  }

  .sl-materials-table tbody tr:last-child td {
    @apply border-b-0;
  }

  .sl-materials-table tbody td strong {
    @apply block text-[13px] font-extrabold text-[#2f3c56];
  }

  .sl-materials-table tbody td span {
    @apply mt-1 block text-[12px] text-[#8a93a6];
  }

  .sl-materials-table__more {
    @apply inline-flex items-center rounded-[8px] bg-[var(--sl-primary-soft)] px-3 py-1.5 text-[12px] font-semibold text-[var(--sl-primary)] transition hover:bg-[var(--sl-secondary-soft)];
  }

  .sl-materials-table__empty {
    @apply py-8 text-center text-[14px] font-semibold text-[#8a93a6];
  }

  .sl-materials-pagination-wrap {
    @apply mt-4 flex items-center justify-center;
  }

  .sl-materials-pagination {
    @apply flex flex-wrap items-center justify-center gap-2;
  }

  .sl-materials-pagination__link {
    @apply inline-flex h-8 min-w-[32px] items-center justify-center rounded-[8px] px-2 text-[14px] font-semibold text-[var(--sl-text)] transition hover:bg-[var(--sl-primary-soft)] hover:text-[var(--sl-primary)];
  }

  .sl-materials-pagination__link.is-active {
    @apply text-white hover:text-white;
    background: var(--sl-primary);
  }

  .sl-materials-pagination__dots {
    @apply px-1 text-[14px] font-semibold text-[#7f889d];
  }

  @media (max-width: 767px) {
    .sl-materials-tabs {
      @apply left-3 right-3 flex-wrap gap-1.5;
      transform: translateY(calc(-100% + 6px));
    }

    .sl-materials-tab {
      @apply h-9 px-3 text-[12px];
    }

    .sl-materials-surface {
      @apply mt-[94px] rounded-[20px] p-3 pt-5;
    }

    .sl-materials-actions,
    .sl-materials-toolbar__actions {
      @apply w-full;
    }

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

    .sl-modal {
      @apply p-2.5;
    }

    .sl-modal__header,
    .sl-modal__body,
    .sl-modal__footer {
      @apply px-4 py-4;
    }
  }

  @media (max-width: 479px) {
    .sl-materials-tabs {
      @apply left-2 right-2 gap-1;
    }

    .sl-materials-tab {
      @apply min-h-[34px] px-2.5 text-[11px] text-center;
      flex: 1 1 calc(50% - 4px);
      justify-content: center;
    }

    .sl-materials-surface {
      @apply mt-[118px] p-2.5 pt-5;
    }
  }
}