/* Module dashboard — bandeau d'accueil, cartes stats, à faire. */

/* Bandeau d'accueil (surface enfoncée, pattern DS) */
.dash-greeting {
  background: var(--surface-sunken);
  border: 1px solid #ECEEF2;
  border-radius: var(--radius-3xl);
  padding: 30px 34px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.dash-greeting__date {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--gray-500);
  margin-bottom: 10px;
}

.dash-greeting__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  line-height: var(--leading-tight);
  margin: 0;
}

.dash-greeting__subtitle {
  font-size: var(--text-md);
  color: #5B6172;
  margin-top: 8px;
}

.dash-greeting__actions {
  display: flex;
  gap: 10px;
  flex: none;
  flex-wrap: wrap;
}

/* Rangée de cartes statistiques */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.dash-hint-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--accent);
}

@media (max-width: 767.98px) {
  .dash-greeting { padding: 22px 20px; }
  .dash-greeting__title { font-size: var(--text-2xl); }
  .dash-stats { grid-template-columns: 1fr; }
}

/* ===== Raccourcis rapides ===== */
.dash-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.dash-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--radius-full);
  border: 1px solid var(--gray-150);
  background: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.dash-shortcut:hover {
  border-color: var(--gray-300);
  color: var(--text-primary);
  background: var(--gray-50);
}
.dash-shortcut .lucide {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

/* ===== Widget repas du jour ===== */
.dash-meal {
  display: flex;
  flex-direction: column;
}
.dash-meal__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.dash-meal__dishes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dash-meal__dishes li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-width: 0;
}
.dash-meal__thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 1px var(--gray-150);
}
.dash-meal__thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
}
.dash-meal__thumb--empty .lucide {
  width: 13px;
  height: 13px;
  color: var(--gray-400);
}
.dash-meal__dish-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.dash-meal__check {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--status-success-fg);
}
.dash-meal__more {
  flex: none;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--accent);
  background: var(--brand-indigo-tint);
  border-radius: var(--radius-full);
  padding: 1px 7px;
}
.dash-meal__guests {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ============================================================
   Communications RH
   ============================================================ */

/* En tête d'écran, avant tout le reste : c'est leur raison d'être. Mais rien
   n'y bloque — pas d'aplat plein, pas de bouton unique imposé. */
.hr-comms { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.hr-comm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--gray-150);
  border-left: 3px solid var(--gray-300);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.hr-comm__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--gray-100);
  color: var(--gray-500);
}
.hr-comm__icon .lucide { width: 17px; height: 17px; }
.hr-comm__body { flex: 1; min-width: 0; }
.hr-comm__title { font-weight: var(--weight-semibold); margin-bottom: 2px; }
.hr-comm__text { font-size: var(--text-sm); color: var(--text-secondary); }
.hr-comm__text p:last-child { margin-bottom: 0; }
.hr-comm__action { flex: none; }
.hr-comm form { margin: 0; }

/* Le ton colore le liseré et l'icône, jamais le fond : une information reste
   une information. */
.hr-comm--important { border-left-color: var(--status-warning-fg); }
.hr-comm--important .hr-comm__icon { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.hr-comm--event { border-left-color: var(--accent); }
.hr-comm--event .hr-comm__icon { background: var(--brand-indigo-tint); color: var(--accent); }

@media (max-width: 640px) {
  .hr-comm { flex-wrap: wrap; }
  .hr-comm__action { width: 100%; }
}

/* ----- Périmètre de la carte « Absences » -----
   Deux périmètres exclusifs : sa BU, ou une liste composée à la main. La liste
   se grise tant que la BU est choisie — elle reste lisible, mais on voit qu'elle
   ne s'applique pas. Le grisage tient en CSS plutôt qu'en JS : les deux cartes
   partagent un conteneur, et :has() va de la case cochée à la liste. */
.dash-scope__list {
  transition: opacity 0.15s ease;
}
.dash-scope:has(#scope_own_bu:checked) .dash-scope__list {
  opacity: 0.45;
  pointer-events: none;
}

.dash-follow {
  max-height: 60vh;
  overflow-y: auto;
  margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1);
}
.dash-follow__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  border-top: 1px solid var(--border-subtle);
}
.dash-follow__row:hover { background: var(--surface-sunken); }
.dash-follow__row input { flex: none; margin: 0; }
.dash-follow__face {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: #fff;
  background: var(--accent);
}
.dash-follow__body { min-width: 0; }
.dash-follow__name { display: block; font-weight: var(--weight-semibold); }
.dash-follow__hint { display: block; font-size: var(--text-sm); color: var(--text-secondary); }