/* ═══════════════════════════════════════════════════════════
   agenda.css — Page Agenda (calendrier mensuel)
   Dépend de : tokens.css, components.css
   ═══════════════════════════════════════════════════════════ */

/* ── En-tête ── */
.agenda-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.agenda-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.agenda-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  min-width: 180px;
  text-align: center;
  text-transform: capitalize;
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 4px 12px;
  transition: background var(--transition-fast), color var(--transition-fast);
  user-select: none;
}
.agenda-title:hover {
  background: rgba(167,139,250,.12);
  color: var(--color-purple);
}

.btn-today {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  color: var(--color-text-2);
  background: var(--color-bg-card-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-today:hover { background: var(--color-purple); color: #fff; border-color: var(--color-purple); }

/* ── Boutons précédent / suivant agenda ── */
.week-nav__btn,
.agenda-nav .week-nav__btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  background: rgba(167,139,250,.18);
  border: 1px solid rgba(167,139,250,.4);
  color: var(--color-purple);
  font-size: 22px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.week-nav__btn:hover,
.agenda-nav .week-nav__btn:hover {
  background: var(--color-purple);
  color: #fff;
  border-color: var(--color-purple);
}

.btn-add-event {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  font-family: var(--font-sans);
  color: #fff;
  background: var(--gradient-purple);
  border-radius: var(--radius-md);
  padding: 8px var(--space-4);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  box-shadow: 0 2px 12px rgba(124,106,247,.3);
}
.btn-add-event:hover { opacity: 0.88; transform: translateY(-1px); }

/* ── Grille calendrier ── */
.calendar-grid-wrap {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.cal-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--space-2);
}
.cal-days-header span {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--color-muted);
  letter-spacing: 0.05em;
  padding: var(--space-2) 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-cell {
  min-height: 88px;
  border-radius: var(--radius-sm);
  padding: 6px;
  background: var(--color-bg-card-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}
.cal-cell:hover          { background: var(--color-bg-hover); border-color: var(--color-border); }
.cal-cell--other-month   { opacity: 0.3; }
.cal-cell--today         { border-color: var(--color-purple) !important; background: var(--color-purple-dim); }
.cal-cell--selected      { border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.08); }

.cal-cell__num {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--color-text-2);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
}
.cal-cell--today .cal-cell__num {
  background: var(--color-purple);
  color: #fff;
}

.cal-event {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  background: var(--color-bg-card);
  border-radius: 3px;
  padding: 2px 5px;
  margin-bottom: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-left: 2px solid var(--c, var(--color-purple));
}
.cal-event__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c, var(--color-purple));
  flex-shrink: 0;
}
.cal-more {
  font-size: 10px;
  color: var(--color-muted);
  padding: 1px 4px;
}

/* ── Détail du jour ── */
.day-detail {
  margin-bottom: var(--space-4);
}

.event-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.event-detail-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  background: var(--color-bg-card-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-2);
  border-left: 3px solid var(--c, var(--color-purple));
  transition: background var(--transition-fast);
}
.event-detail-item:hover { background: var(--color-bg-hover); }

.event-detail-item__time {
  font-size: var(--text-xs);
  color: var(--color-muted);
  width: 40px;
  flex-shrink: 0;
}
.event-detail-item__body { flex: 1; }
.event-detail-item__name { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.event-detail-item__loc  { font-size: var(--text-xs); color: var(--color-muted); margin-top: 2px; }

.event-delete {
  opacity: 0;
  color: var(--color-muted);
  font-size: 18px;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.event-detail-item:hover .event-delete { opacity: 1; }
.event-delete:hover { color: var(--color-red); background: var(--color-red-dim); }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: #1e2440;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-md);
  transform: translateY(12px);
  transition: transform var(--transition-base);
}
.modal-overlay.open .modal { transform: translateY(0); }

.modal-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.modal-title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.modal-close {
  color: var(--color-muted); font-size: 22px;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.modal-close:hover { color: var(--color-text); background: var(--color-bg-card-2); }

.modal-body { display: flex; flex-direction: column; gap: var(--space-4); }

.form-group { display: flex; flex-direction: column; gap: var(--space-1); }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form-label { font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--color-text-2); }

.form-input {
  background: var(--color-bg-card-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  padding: 9px var(--space-3);
  transition: border-color var(--transition-fast);
  width: 100%;
}
.form-input::placeholder { color: var(--color-muted); }
.form-input:focus { border-color: var(--color-purple); outline: none; }

/* Picker couleur */
.color-picker { display: flex; gap: var(--space-2); }
.color-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid transparent;
  opacity: 0.6;
  transition: opacity var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.color-btn:hover  { opacity: 1; transform: scale(1.1); }
.color-btn.active { opacity: 1; border-color: #fff; transform: scale(1.15); }

.modal-footer {
  display: flex; justify-content: flex-end;
  gap: var(--space-3); margin-top: var(--space-5);
}
.btn-cancel {
  font-size: var(--text-sm); font-family: var(--font-sans);
  color: var(--color-muted);
  background: var(--color-bg-card-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px var(--space-4);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.btn-cancel:hover { color: var(--color-text); background: var(--color-bg-hover); }

.btn-submit {
  font-size: var(--text-sm); font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  color: #fff;
  background: var(--gradient-purple);
  border-radius: var(--radius-md);
  padding: 8px var(--space-5);
  transition: opacity var(--transition-fast);
  box-shadow: 0 2px 12px rgba(124,106,247,.3);
}
.btn-submit:hover    { opacity: 0.88; }
.btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .cal-cell { min-height: 56px; }
  .cal-event { display: none; }
  .cal-cell--has-events::after {
    content: '';
    display: block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--color-purple);
    margin: 2px auto 0;
  }
  .agenda-title { min-width: 120px; font-size: var(--text-lg); }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Actions événement (modifier + supprimer) ── */
.event-detail-item__actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}
.event-detail-item:hover .event-detail-item__actions { opacity: 1; }

.event-edit,
.event-delete {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  color: var(--color-muted);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.event-edit:hover   { color: var(--color-purple); background: var(--color-purple-dim); }
.event-delete:hover { color: var(--color-red);    background: var(--color-red-dim); }