/* ============================================================
   Blue Shift — Shared Calendar styles (Feature A)
   Utilise les variables CSS existantes de l'app.
   ============================================================ */

/* ── Carte de planning partagé ─────────────────────────────── */
.sf-share-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.sf-share-card:hover,
.sf-share-card:focus-visible {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.sf-share-card__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #22c55e;
}

.sf-share-card__body {
  flex: 1;
  min-width: 0;
}

.sf-share-card__name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-share-card__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Badges de permission ───────────────────────────────────── */
.sf-perm-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: var(--fw-medium);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  line-height: 1.5;
}

.sf-perm-badge--read   { background: rgba(14,165,233,0.12);  color: var(--accent); }
.sf-perm-badge--notes  { background: rgba(168,85,247,0.12);  color: #c084fc; }
.sf-perm-badge--modify { background: rgba(251,191,36,0.12);  color: #fbbf24; }
.sf-perm-badge--leaves { background: rgba(34,197,94,0.12);   color: #22c55e; }

/* ── Token d'invitation (code monospace cliquable) ──────────── */
.sf-invite-token {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
  transition: background 120ms ease;
  user-select: all;
}

.sf-invite-token:hover {
  background: var(--accent-subtle);
}

/* ── Badge de statut du lien ────────────────────────────────── */
.sf-status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--fw-medium);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.sf-status-badge--pending { background: rgba(251,191,36,0.12); color: #fbbf24; }
.sf-status-badge--active  { background: rgba(34,197,94,0.12);  color: #22c55e; }
.sf-status-badge--revoked { background: rgba(107,114,128,0.12); color: var(--text-muted); }

/* ── Semaine strip (shared-view) ────────────────────────────── */
.sf-week-strip {
  display: flex;
  gap: 4px;
}

.sf-week-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  transition: background 120ms ease;
}

.sf-week-day--today {
  background: var(--accent);
  color: #fff;
  font-weight: var(--fw-bold);
}

.sf-week-day--working {
  background: var(--surface-3);
}

.sf-week-day__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-top: 4px;
}

/* ── Modal / Bottom-sheet (partagée avec les modales existantes) */
.sf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: var(--z-modal, 9000);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sf-modal-sheet {
  background: var(--surface-1);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding: var(--space-5);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

/* Grille calendrier mensuel */
.sf-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.sf-month-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 12px;
  transition: background 100ms ease;
}

.sf-month-cell--today {
  background: var(--accent);
  color: #fff;
  font-weight: var(--fw-bold);
}

.sf-month-cell--working {
  background: var(--surface-3);
  color: var(--text);
}