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

.event-form-shell {
  width: min(100%, var(--layout-form-max));
  margin: 0 auto;
  gap: var(--space-5);
  color: var(--color-ink);
}

.event-form-header {
  max-width: var(--layout-reading-max);
  gap: var(--space-2);
}

.event-form-header h1,
.event-form-header p {
  margin-top: 0;
}

.event-form-header h1 {
  font-size: var(--typography-size-page);
  font-weight: var(--typography-weight-strong);
  line-height: 1.15;
}

.event-form-header .muted {
  color: var(--color-muted);
}

.event-form-card {
  gap: var(--space-4);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-surface);
}

.event-form-section {
  min-width: 0;
  margin: 0;
  border: var(--border-width-default) solid var(--color-line);
  border-radius: var(--radius-surface);
  padding: var(--space-5);
}

.event-form-section > legend {
  padding: 0 var(--space-2);
  font-size: var(--typography-size-body);
  font-weight: var(--typography-weight-bold);
}

.event-form-section > label,
.event-form-section > div > label,
.event-form-recurrence-body > label,
.event-form-progressive-body > label {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  font-weight: var(--typography-weight-semibold);
}

.event-form-check {
  display: inline-flex !important;
  min-height: var(--control-height-default);
  align-items: center;
  gap: var(--space-2) !important;
  width: fit-content;
  font-weight: var(--typography-weight-semibold);
  cursor: pointer;
}

.event-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-4);
}

/* Calendar is contextual; Début / Fin form the actual field pair below it. */
.event-form-primary .event-form-grid > label:first-child {
  grid-column: 1 / -1;
}

.event-form-card input,
.event-form-card select,
.event-form-card textarea {
  min-width: 0;
  border-radius: var(--radius-control);
}

.event-form-card input:not([type="checkbox"]):not([type="radio"]),
.event-form-card select {
  min-height: var(--control-height-default);
}

.event-form-card input[type="radio"],
.event-form-card input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: 0 0 auto;
}

.event-form-card select[multiple] {
  min-height: 10rem;
}

.event-form-recurrence,
.event-form-progressive {
  min-width: 0;
  overflow: hidden;
  border: var(--border-width-default) solid var(--color-line);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.event-form-recurrence > summary,
.event-form-progressive > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-height-large);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  font-weight: var(--typography-weight-bold);
}

.event-form-progressive > summary .muted {
  color: var(--color-muted);
  text-align: right;
  font-size: var(--typography-size-meta);
  font-weight: var(--typography-weight-semibold);
}

.event-form-recurrence > summary:hover,
.event-form-recurrence > summary:focus-visible,
.event-form-progressive > summary:hover,
.event-form-progressive > summary:focus-visible {
  background: var(--color-brand-soft);
}

.event-form-recurrence[open] > summary,
.event-form-progressive[open] > summary {
  border-bottom: var(--border-width-default) solid var(--color-line);
}

.event-form-recurrence-body,
.event-form-progressive-body {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: var(--space-5);
  border: 0;
}

#event-form-recurrence-parameters[hidden] {
  display: none;
}

.event-form-recurrence-body fieldset {
  min-width: 0;
}

.event-form-recurrence-body ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.event-form-recurrence-body li label {
  display: inline-flex;
  min-height: var(--control-height-default);
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  font-weight: var(--typography-weight-medium);
  cursor: pointer;
}

.event-form-recurrence-body > div:first-of-type > label {
  font-weight: var(--typography-weight-semibold);
}

.event-form-resources .message p:last-child,
.event-form-resources p:last-child {
  margin-bottom: 0;
}

.event-form-resource-list {
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.event-form-resource-row {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border: var(--border-width-default) solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.event-form-resource-row[data-resource-selected="true"] {
  background: var(--color-brand-soft);
}

.event-form-resource-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  cursor: pointer;
}

.event-form-resource-choice > .stack {
  gap: var(--space-1);
  min-width: 0;
}

.event-form-resource-choice .muted {
  color: var(--color-muted);
  font-size: var(--typography-size-meta);
  font-weight: var(--typography-weight-medium);
}

.event-form-resource-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding-left: calc(1rem + var(--space-3));
}

.event-form-resource-controls[hidden] {
  display: none;
}

.event-form-resource-controls > label {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  font-weight: var(--typography-weight-semibold);
}

.event-form-actions {
  justify-content: flex-end;
  gap: var(--space-3);
}

.event-form-actions > * {
  min-height: var(--control-height-default);
}

.event-form-card :is(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--border-width-focus) solid var(--color-focus);
  outline-offset: var(--space-1);
}

@media (min-width: 1100px) {
  .event-form-card {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .event-form-section,
  .event-form-recurrence,
  .event-form-progressive {
    background: var(--color-surface);
  }

  .event-form-actions {
    padding-top: var(--space-1);
  }
}

@media (max-width: 700px) {
  .event-form-shell {
    gap: var(--space-3);
  }

  .event-form-header {
    gap: var(--space-2);
  }

  .event-form-header .calendar-eyebrow {
    margin-bottom: 0;
  }

  .event-form-card {
    padding: var(--space-3);
    gap: var(--space-3);
    overflow: visible;
  }

  .event-form-section,
  .event-form-recurrence-body,
  .event-form-progressive-body {
    padding: var(--space-3);
  }

  .event-form-grid,
  .event-form-resource-controls {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .event-form-resource-controls {
    padding-left: 0;
  }

  .event-form-primary .event-form-grid > label:first-child {
    grid-column: auto;
  }

  .event-form-recurrence > summary,
  .event-form-progressive > summary {
    min-height: var(--control-height-default);
    padding: var(--space-3);
    align-items: flex-start;
    flex-direction: column;
  }

  .event-form-progressive > summary .muted {
    text-align: left;
    font-size: var(--typography-size-caption);
  }

  .event-form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: var(--space-1);
  }

  .event-form-actions > * {
    width: 100%;
    text-align: center;
  }
}