/*
 * Actions circulaires partagées dans toute l'application.
 * - .icon-pill : grandes actions principales dans les en-têtes.
 * - .action-pill : petites actions placées dans les cartes et les listes.
 */

.icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.25rem;
  box-shadow: none;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.icon-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 28px rgba(38, 28, 18, 0.16);
  filter: saturate(1.04);
}

.icon-pill:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(53, 106, 146, 0.4);
}

.icon-pill-open, .icon-pill-new, .icon-pill-save { background: #eeeaf7; color: #61548f; }
.icon-pill-close { background: #f3e8e8; color: #9d555d; }
.icon-pill-add { background: #7567a8; color: #fff; }

.timetable-add-pill {
  width: 78px;
  height: 78px;
  font-size: 2rem;
}

.action-pills {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.item-actions .action-pill,
.action-pill {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.item-actions .action-pill:hover,
.action-pill:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 7px 15px rgba(38, 28, 18, 0.22);
  filter: brightness(1.06);
}

.item-actions .action-pill:focus-visible,
.action-pill:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(53, 106, 146, 0.4);
}

.action-pill svg {
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.item-actions .action-pill-edit,
.action-pill-edit {
  background: #6686a0;
}

.item-actions .action-pill-delete,
.action-pill-delete {
  background: #b77b82;
}

.item-actions .action-pill-add,
.action-pill-add {
  background: #718f7a;
}

.item-actions .action-pill-neutral,
.action-pill-neutral {
  background: #7567a8;
}

@media (prefers-reduced-motion: reduce) {
  .icon-pill,
  .action-pill {
    transition: none;
  }
}

/* Dialogue de confirmation associe aux actions destructives. */
#delete-timetable-modal,
#app-confirm-modal {
  z-index: 70;
}

.confirmation-dialog {
  width: min(460px, 100%);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.confirmation-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(201, 71, 71, 0.13);
  color: #b63838;
}

.confirmation-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.confirmation-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.button.danger {
  background: #b77b82;
  color: #fff;
}

.button.danger:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

.button.secondary:disabled {
  cursor: not-allowed;
  border-color: rgba(103, 112, 133, 0.16);
  background: #e2e3e6;
  color: #8a8f99;
  opacity: 0.72;
  box-shadow: none;
}

@media (max-width: 520px) {
  .confirmation-dialog {
    grid-template-columns: 1fr;
  }

  .confirmation-actions {
    grid-column: auto;
  }
}