@layer components {
  .sl-meetings-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (min-width: 1280px) {
    .sl-meetings-filters {
      flex: 0 0 auto;
    }

    .sl-meetings-toolbar {
      justify-content: flex-start;
    }

    .sl-meetings-toolbar .sl-materials-toolbar__actions {
      align-self: flex-end;
      justify-content: flex-start;
    }

    .sl-meetings-filter-field--type {
      flex: 0 0 320px;
      max-width: 320px;
    }

    .sl-meetings-filter-field--date {
      flex: 0 0 190px;
      max-width: 190px;
    }
  }

  .sl-propositions-filters {
    grid-template-columns: minmax(0, 320px);
  }

  @media (min-width: 1280px) {
    .sl-propositions-filter-field--type {
      flex: 0 0 320px;
      max-width: 320px;
    }
  }

  .sl-meetings-table__actions {
    @apply flex flex-nowrap items-center justify-end gap-2;
  }

  .sl-meetings-table__menu-cell {
    @apply w-px whitespace-nowrap text-right;
  }

  .sl-propositions-table-card__heading {
    @apply min-w-0;
  }

  .sl-propositions-table-card__title-row {
    @apply flex flex-wrap items-center gap-2;
  }

  .sl-propositions-table-card__badge {
    @apply inline-flex items-center rounded-full bg-[#edf4ff] px-2.5 py-1 text-[11px] font-semibold text-[#4d80d0];
  }

  .sl-meetings-table__muted {
    @apply text-[12px] font-semibold text-[#8a93a6];
  }

  .sl-meetings-table__action-icon {
    @apply relative inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[8px] border transition-colors;
  }

  .sl-meetings-table__action-icon.is-summary,
  .sl-meetings-table__action-icon.is-propositions,
  .sl-meetings-table__action-icon.is-file,
  .sl-meetings-table__action-icon.is-agenda,
  .sl-meetings-table__action-icon.is-presence,
  .sl-meetings-table__action-icon.is-detail {
    @apply text-[#1f6fbe];
    background: #f4f8ff;
    border-color: #cfe0f7;
  }

  .sl-meetings-table__action-icon.is-attachment {
    @apply text-[#b06a12];
    background: #fff8ea;
    border-color: #f2d9aa;
  }

  .sl-meetings-table__action-icon.is-file {
    color: #2563eb;
    background: #eaf2ff;
    border-color: #bfd6ff;
  }

  .sl-meetings-table__action-icon.is-agenda {
    color: #0284c7;
    background: #e8f7ff;
    border-color: #bce8fb;
  }

  .sl-meetings-table__action-icon.is-propositions,
  .sl-meetings-table__action-icon.is-summary {
    color: #4f46e5;
    background: #f0edff;
    border-color: #d7cdfd;
  }

  .sl-meetings-table__action-icon.is-presence {
    color: #0f766e;
    background: #e8fbf6;
    border-color: #bcecdf;
  }

  .sl-meetings-table__action-icon.is-detail {
    color: #7c3aed;
    background: #f5edff;
    border-color: #e1d0ff;
  }

  .sl-meetings-table__action-icon:hover {
    filter: brightness(0.96);
  }

  .sl-meetings-table__action-icon svg {
    @apply h-[18px] w-[18px];
  }

  .sl-floating-tooltip {
    @apply pointer-events-none fixed z-[320] whitespace-nowrap rounded-[6px] bg-[#172033] px-2.5 py-1.5 text-[11px] font-bold leading-none text-white opacity-0 shadow-sm transition-opacity duration-150;
    transform: translate(-50%, -100%);
  }

  .sl-floating-tooltip::after {
    content: "";
    @apply absolute left-1/2 top-full h-0 w-0 border-x-[5px] border-t-[5px] border-x-transparent border-t-[#172033];
    transform: translateX(-50%);
  }

  .sl-floating-tooltip.is-visible {
    @apply opacity-100;
  }

  .sl-meetings-files {
    @apply flex flex-col gap-3;
  }

  .sl-meetings-files__link {
    @apply rounded-[10px] border border-[#e3eaf7] bg-[#f8faff] px-4 py-3 text-[14px] font-semibold text-[#3f5f99] transition hover:border-[#cbd8f0] hover:bg-[#eef4ff];
  }

  .sl-meetings-file-card {
    @apply flex flex-col gap-3 rounded-[12px] border border-[#dfe8f7] bg-[#f8fbff] p-4 shadow-sm sm:flex-row sm:items-center;
  }

  .sl-meetings-file-card__icon {
    @apply inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-[8px] border border-[#cfe0f7] bg-white text-[#1f6fbe];
  }

  .sl-meetings-file-card__icon svg {
    @apply h-5 w-5;
  }

  .sl-meetings-file-card__copy {
    @apply min-w-0 flex-1;
  }

  .sl-meetings-file-card__copy strong {
    @apply block truncate text-[14px] font-extrabold text-[#2f3c56];
  }

  .sl-meetings-file-card__copy span {
    @apply mt-1 block text-[12px] font-semibold text-[#7b89a3];
  }

  .sl-meetings-file-card__download {
    @apply inline-flex h-10 shrink-0 items-center justify-center rounded-[8px] border border-[var(--sl-primary)] bg-[var(--sl-primary)] px-4 text-[12px] font-extrabold text-white transition-colors hover:border-[#174d8a];
  }

  .sl-modal__dialog--presence {
    max-width: 860px;
  }

  .sl-meetings-presence-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
  }

  @media (min-width: 640px) {
    .sl-meetings-presence-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .sl-meetings-presence-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .sl-meetings-presence-card {
    @apply flex flex-col overflow-hidden rounded-[16px] border border-[#e2e8f4] bg-[#fbfcff];
    box-shadow: 0 12px 24px rgba(111, 129, 171, 0.08);
  }

  .sl-modal__dialog--presence .sl-modal__panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
  }

  .sl-modal__dialog--presence .sl-modal__body {
    overflow-y: auto;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .sl-meetings-presence-card__photo-wrap {
    @apply flex items-center justify-center border-b border-[#edf1fb] bg-[linear-gradient(180deg,_#f7f9ff,_#eef4ff)] p-4;
    min-height: 150px;
  }

  .sl-meetings-presence-card__photo {
    @apply h-[120px] w-full rounded-[12px] object-contain;
  }

  .sl-meetings-presence-card__body {
    @apply flex flex-col gap-2 px-4 py-3 text-center;
  }

  .sl-meetings-presence-card__body strong {
    @apply text-[15px] font-extrabold text-[#36445f];
    line-height: 1.3;
  }

  .sl-meetings-presence-card__body span {
    @apply text-[12px] font-semibold text-[#7a869f];
    line-height: 1.35;
  }

  .sl-proposition-summary {
    @apply flex flex-col gap-5;
  }

  .sl-proposition-summary__actions {
    @apply flex flex-wrap items-center gap-3;
  }

  .sl-proposition-summary__hero {
    @apply flex flex-col gap-4 rounded-[20px] border border-[#e5ebf7] bg-[linear-gradient(180deg,_#f4f7ff,_#ffffff)] px-5 py-5;
  }

  @media (min-width: 1024px) {
    .sl-proposition-summary__hero {
      @apply flex-row items-start justify-between;
    }
  }

  .sl-proposition-summary__eyebrow {
    @apply text-[12px] font-extrabold uppercase tracking-[0.08em] text-[#4d80d0];
  }

  .sl-proposition-summary__hero h1 {
    @apply mt-2 text-[30px] font-extrabold leading-none text-[#3e4a63];
  }

  .sl-proposition-summary__hero p {
    @apply mt-2 max-w-[760px] text-[13px] font-medium text-[#77839d];
  }

  .sl-proposition-summary__ata-label {
    @apply mt-2 inline-flex items-center rounded-full border border-[#d7e4fb] bg-white px-3 py-1 text-[12px] font-bold uppercase tracking-[0.08em] text-[#4d80d0];
  }

  .sl-proposition-summary__text-static,
  .sl-proposition-summary__text-preview,
  .sl-proposition-summary__text-full {
    @apply mt-2 max-w-[860px] text-[13px] font-medium leading-6 text-[#77839d];
  }

  .sl-proposition-summary__text-details {
    @apply mt-2 max-w-[860px];
  }

  .sl-proposition-summary__text-summary {
    @apply list-none cursor-pointer;
  }

  .sl-proposition-summary__text-summary::-webkit-details-marker {
    display: none;
  }

  .sl-proposition-summary__text-toggle {
    @apply mt-3 inline-flex items-center rounded-[10px] border border-[#d9e4f6] bg-white px-3 py-1.5 text-[12px] font-extrabold text-[#4d80d0];
  }

  .sl-proposition-summary__text-toggle .is-expanded {
    display: none;
  }

  .sl-proposition-summary__text-details[open]
    .sl-proposition-summary__text-preview {
    display: none;
  }

  .sl-proposition-summary__text-details[open]
    .sl-proposition-summary__text-toggle
    .is-collapsed {
    display: none;
  }

  .sl-proposition-summary__text-details[open]
    .sl-proposition-summary__text-toggle
    .is-expanded {
    display: inline;
  }

  .sl-proposition-summary__text-full {
    @apply pt-2;
  }

  .sl-proposition-summary__status,
  .sl-proposition-summary-card__pill {
    @apply inline-flex items-center rounded-full px-3 py-1 text-[11px] font-extrabold uppercase tracking-[0.06em];
  }

  .sl-proposition-summary__status.is-approved,
  .sl-proposition-summary-card__pill.is-approved {
    @apply bg-[#e8fbf5] text-[#19926f];
  }

  .sl-proposition-summary__status.is-progress,
  .sl-proposition-summary-card__pill.is-progress {
    @apply bg-[#eef4ff] text-[#4d80d0];
  }

  .sl-proposition-summary__status.is-rejected,
  .sl-proposition-summary-card__pill.is-rejected {
    @apply bg-[#fff1f1] text-[#c35d5d];
  }

  .sl-proposition-summary__status.is-pending,
  .sl-proposition-summary-card__pill.is-pending {
    @apply bg-[#fff6e8] text-[#bf7a1d];
  }

  .sl-proposition-summary__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  @media (min-width: 1180px) {
    .sl-proposition-summary__grid {
      grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.35fr);
      align-items: start;
    }
  }

  .sl-proposition-summary-card,
  .sl-proposition-summary-panel,
  .sl-proposition-summary-empty {
    @apply rounded-[18px] border border-[#dde6f4] bg-white p-4;
    box-shadow: 0 14px 34px rgba(115, 132, 173, 0.08);
  }

  .sl-proposition-summary-card__header,
  .sl-proposition-summary-panel__header {
    @apply flex flex-col gap-3;
  }

  .sl-proposition-summary-panel__header > div:first-child {
    @apply min-w-0;
  }

  @media (min-width: 640px) {
    .sl-proposition-summary-card__header,
    .sl-proposition-summary-panel__header {
      @apply flex-row items-center justify-between gap-4;
    }
  }

  .sl-proposition-summary-card__header h2,
  .sl-proposition-summary-panel__header h2,
  .sl-proposition-summary-empty h2 {
    @apply text-[18px] font-extrabold text-[#3f4a62];
  }

  .sl-proposition-summary-card__header p,
  .sl-proposition-summary-panel__header p,
  .sl-proposition-summary-empty p {
    @apply mt-1 text-[12px] font-medium text-[#7b869c];
  }

  .sl-proposition-summary-card__chart {
    @apply mt-5 rounded-[16px] border border-[#edf2fb] bg-[#fbfcff] px-3 py-4;
  }

  .sl-proposition-summary-card__chart .sl-chart {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    min-height: 160px;
    padding: 1rem 0.9rem 0.65rem;
    background-size:
      100% 25%,
      25% 100%;
  }

  .sl-proposition-summary-card__chart .sl-chart__bar-wrap {
    height: 96px;
    width: 100%;
    max-width: 52px;
    margin: 0 auto;
  }

  .sl-proposition-summary-card__chart .sl-chart__item {
    gap: 0.45rem;
  }

  .sl-proposition-summary-card__chart .sl-chart__bar {
    width: 100%;
    border-radius: 0;
  }

  .sl-proposition-summary-card__chart .sl-chart__label {
    font-size: 10px;
    line-height: 1.1;
  }

  .sl-proposition-summary-card__chart .sl-chart__value {
    top: -18px;
    min-width: 56px;
    padding: 8px 10px;
  }

  .sl-proposition-summary-card__chart .sl-chart__value strong {
    font-size: 12px;
  }

  .sl-proposition-summary-card__chart .sl-chart__value span {
    font-size: 10px;
  }

  .sl-proposition-summary-card__totals {
    @apply mt-4 grid grid-cols-2 gap-3;
  }

  @media (min-width: 640px) {
    .sl-proposition-summary-card__totals {
      @apply grid-cols-4;
    }
  }

  .sl-proposition-summary-card__totals div {
    @apply rounded-[14px] border border-[#ebeff8] bg-[#f8faff] px-3 py-3 text-center;
  }

  .sl-proposition-summary-card__totals div:nth-child(1) {
    background: #edf5ff;
    border-color: #cfe0f4;
  }

  .sl-proposition-summary-card__totals div:nth-child(1) strong {
    color: #1f5a84;
  }

  .sl-proposition-summary-card__totals div:nth-child(2) {
    background: #fff5e7;
    border-color: #f3d7a6;
  }

  .sl-proposition-summary-card__totals div:nth-child(2) strong {
    color: #b97518;
  }

  .sl-proposition-summary-card__totals div:nth-child(3) {
    background: #eef0ff;
    border-color: #d2d8fb;
  }

  .sl-proposition-summary-card__totals div:nth-child(3) strong {
    color: #5968d8;
  }

  .sl-proposition-summary-card__totals div:nth-child(4) {
    background: #f3f5f8;
    border-color: #e1e6ef;
  }

  .sl-proposition-summary-card__totals div:nth-child(4) strong {
    color: #73819c;
  }

  .sl-proposition-summary-card__totals strong {
    @apply block text-[20px] font-extrabold text-[#41506b];
  }

  .sl-proposition-summary-card__totals span {
    @apply mt-1 block text-[11px] font-bold uppercase tracking-[0.05em] text-[#8a94a8];
  }

  .sl-proposition-summary-panel__meta {
    @apply flex flex-wrap items-center justify-end gap-x-3 gap-y-1 text-[11px] font-semibold text-[#7f8aa2];
    text-align: right;
  }

  .sl-proposition-summary-panel__meta span {
    @apply whitespace-nowrap;
  }

  .sl-proposition-summary-votes {
    @apply mt-4 flex flex-col gap-3;
  }

  .sl-proposition-summary-vote {
    @apply flex flex-col gap-3 rounded-[14px] border border-dashed border-[#bfd4fa] px-3 py-3;
  }

  @media (min-width: 640px) {
    .sl-proposition-summary-vote {
      @apply flex-row items-center justify-between;
    }
  }

  .sl-proposition-summary-vote__identity {
    @apply flex min-w-0 items-center gap-3;
  }

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

  .sl-proposition-summary-vote__avatar img {
    @apply h-full w-full object-contain;
  }

  .sl-proposition-summary-vote__text {
    @apply min-w-0;
  }

  .sl-proposition-summary-vote__text strong {
    @apply block truncate text-[14px] font-extrabold text-[#45516c];
  }

  .sl-proposition-summary-vote__text span {
    @apply mt-1 block text-[12px] font-medium text-[#8791a5];
  }

  .sl-proposition-summary-vote__badge {
    @apply inline-flex items-center justify-center self-start rounded-[10px] px-3 py-1.5 text-[11px] font-extrabold uppercase tracking-[0.06em];
  }

  .sl-proposition-summary-vote__badge.is-yes {
    @apply bg-[#dff5ef] text-[#1b8e72];
  }

  .sl-proposition-summary-vote__badge.is-no {
    @apply bg-[#fff0f0] text-[#c65b5b];
  }

  .sl-proposition-summary-vote__badge.is-abstention {
    @apply bg-[#eef0ff] text-[#6477d7];
  }

  .sl-proposition-summary-vote__badge.is-out,
  .sl-proposition-summary-vote__badge.is-neutral {
    @apply bg-[#f2f4f8] text-[#7b869c];
  }

  .sl-proposition-summary-empty {
    @apply flex flex-col gap-3;
  }

  @media (max-width: 767px) {
    .sl-proposition-summary {
      @apply gap-4;
    }

    .sl-proposition-summary__hero {
      @apply rounded-[18px] px-4 py-4;
    }

    .sl-proposition-summary__hero h1 {
      @apply text-[26px] leading-tight;
    }

    .sl-proposition-summary-card,
    .sl-proposition-summary-panel,
    .sl-proposition-summary-empty {
      @apply rounded-[16px] p-3;
    }

    .sl-proposition-summary-card__chart {
      @apply px-2 py-3;
    }

    .sl-proposition-summary-card__chart .sl-chart {
      gap: 0.55rem;
      padding: 0.85rem 0.45rem 0.5rem;
    }

    .sl-proposition-summary-card__chart .sl-chart__bar-wrap {
      height: 84px;
      max-width: 48px;
    }

    .sl-proposition-summary-card__totals {
      @apply grid-cols-2 gap-2;
    }

    .sl-proposition-summary-vote {
      @apply gap-2.5 px-3 py-2.5;
    }

    .sl-proposition-summary-vote__badge {
      @apply w-full;
    }
  }
}