@import url("../design/tokens.cf68e2506a35.css");

.calendar-event-plan {
  border: var(--border-width-default) solid var(--color-line);
  border-radius: var(--radius-surface);
  padding: var(--space-4);
}

.calendar-event-plan-controls {
  display: grid;
  grid-template-columns: minmax(12rem, 2fr) minmax(8rem, 1fr) minmax(6rem, 0.7fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.calendar-event-plan-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-event-plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: var(--border-width-default) solid var(--color-line);
  border-radius: var(--radius-control);
}

.calendar-event-plan-row > div {
  display: grid;
  gap: var(--space-1);
}

.calendar-event-plan-quantity {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.calendar-event-plan-quantity input {
  width: 5.5rem;
}

.calendar-event-plan-conflict {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width-default) solid currentColor;
}

.calendar-event-plan-conflict p,
.calendar-event-plan-conflict ul {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .calendar-event-plan-controls,
  .calendar-event-plan-row {
    grid-template-columns: 1fr;
  }

  .calendar-event-plan-row button {
    justify-self: start;
  }
}

/* R4 — l'état de disponibilité est d'abord un texte. La couleur et la puce ne font que
   renforcer une information déjà lisible sans elles. */
.calendar-event-plan-availability {
  display: inline-flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--typography-size-caption);
  font-weight: var(--typography-weight-semibold);
  color: var(--color-muted);
}

.calendar-event-plan-availability::before {
  content: "○";
  font-weight: var(--typography-weight-semibold);
}

.calendar-event-plan-availability[data-availability="available"] {
  color: var(--color-success);
}

.calendar-event-plan-availability[data-availability="available"]::before {
  content: "●";
}

.calendar-event-plan-availability[data-availability="unavailable"],
.calendar-event-plan-availability[data-availability="error"] {
  color: var(--color-danger);
}

.calendar-event-plan-availability[data-availability="unavailable"]::before {
  content: "✕";
}

.calendar-event-plan-availability[data-availability="error"]::before {
  content: "!";
}

.calendar-event-plan-availability[data-availability="checking"]::before {
  content: "◐";
}

.calendar-event-plan-list--flagged .calendar-event-plan-row {
  border-color: var(--color-danger);
}

.calendar-event-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.calendar-event-plan-action {
  min-height: 44px;
}