/* Module absences — congés, télétravail, arrêts, planning.
   Une couleur saturée par type, teintes pâles dérivées (pattern DS). */

:root {
  --absence-paid: var(--brand-indigo);
  --absence-unpaid: var(--status-warning-fg);
  --absence-special: var(--status-violet-fg);
  --absence-remote: var(--status-success-fg);
  --absence-sick: var(--status-danger-fg);
  --absence-masked: var(--gray-400);
}

/* Teinte du type : pose --tc, utilisée par chip/dot/carte */
.abs-tint--paid_leave { --tc: var(--absence-paid); }
.abs-tint--unpaid_leave { --tc: var(--absence-unpaid); }
.abs-tint--special_leave { --tc: var(--absence-special); }
.abs-tint--remote_work { --tc: var(--absence-remote); }
.abs-tint--sick_leave { --tc: var(--absence-sick); }
.abs-tint--masked { --tc: var(--absence-masked); }

/* Pastille ronde de légende */
.absence-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dot-color, var(--absence-masked));
}
.absence-dot--paid_leave { --dot-color: var(--absence-paid); }
.absence-dot--unpaid_leave { --dot-color: var(--absence-unpaid); }
.absence-dot--special_leave { --dot-color: var(--absence-special); }
.absence-dot--remote_work { --dot-color: var(--absence-remote); }
.absence-dot--sick_leave { --dot-color: var(--absence-sick); }
.absence-dot--masked { --dot-color: var(--absence-masked); }

/* Vignette d'icône teintée du type */
.abs-chip {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tc, var(--absence-masked)) 11%, #fff);
  color: var(--tc, var(--absence-masked));
}
.abs-chip--sm { width: 36px; height: 36px; border-radius: var(--radius-md); }

/* Pastille d'état */
.abs-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  white-space: nowrap;
}
.abs-pill--ok { background: var(--status-success-bg); color: var(--status-success-fg); }
.abs-pill--wait { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.abs-pill--no { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.abs-pill--muted { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* ===== Spotlight « prochaine absence » ===== */
.abs-spotlight {
  padding: 22px 24px;
  border-radius: 24px;
}
.abs-spotlight.abs-tint {
  background: color-mix(in srgb, var(--tc) 5%, #fff);
  border-color: color-mix(in srgb, var(--tc) 16%, transparent);
}
.abs-spotlight__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.abs-spotlight__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.abs-spotlight__dates {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}
.abs-spotlight__count {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex: none;
}
.abs-spotlight__count b {
  font-size: 34px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.abs-spotlight__count span { font-size: var(--text-sm); color: var(--text-secondary); }
.abs-spotlight--empty {
  text-align: center;
  color: var(--text-secondary);
}
.abs-spotlight--empty .lucide { color: var(--gray-300); }

/* Mini-carte statistique */
.abs-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-2xl);
  flex: 1;
}
.abs-stat__ic {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.abs-stat__v {
  font-size: 26px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
.abs-stat__l { font-size: 12px; color: var(--gray-500); }

/* Titre de section avec compteur et filet */
.abs-section {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Rythme entre deux sections de page. En dur (26px) auparavant : le jeton
     rend l'écart comparable à celui des autres écrans. */
  margin: var(--space-9) 0 var(--space-4);
}
.abs-section h2 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin: 0;
}
.abs-section__n {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: var(--gray-100);
  border-radius: var(--radius-full);
  padding: 2px 9px;
}
.abs-section__rule {
  flex: 1;
  height: 1px;
  background: var(--gray-150);
}

/* ===== Carte de demande ===== */
.abs-req {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  background: var(--surface-card);
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-xl);
  padding: 13px 16px;
  margin-bottom: 9px;
  transition: border-color 0.16s ease;
}
.abs-req:hover { border-color: var(--gray-200); }
.abs-req--past { opacity: 0.62; }
.abs-req__title { font-size: var(--text-base); font-weight: var(--weight-medium); }
.abs-req__title small { color: var(--gray-500); font-weight: var(--weight-normal); }
.abs-req__meta { font-size: var(--text-sm); color: var(--gray-500); margin-top: 2px; }
.abs-req__right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.abs-req__note {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--status-danger-fg);
  background: var(--status-danger-bg);
  border-radius: var(--radius-md);
  padding: 9px 12px;
}

/* Bouton icône discret (annuler / éditer) */
.abs-iconbtn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--gray-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
  padding: 0;
}
.abs-iconbtn:hover { border-color: var(--status-danger-fg); color: var(--status-danger-fg); }
.abs-iconbtn--edit:hover { border-color: var(--accent); color: var(--accent); }

/* ===== Formulaire : sélecteur de type en cartes ===== */
.abs-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 9px;
}
.abs-type__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.abs-type {
  /* Ancre l'input masqué : sans cela il se rattache au bloc racine,
     échappe au rognage de la coque et rend la fenêtre défilable. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-xl);
  padding: 11px 13px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
  margin: 0;
}
.abs-type:hover { border-color: var(--gray-300); }
.abs-type__input:checked + .abs-type {
  border: 2px solid var(--accent);
  background: #EFF0FF;
  padding: 10px 12px;
}
.abs-type__input:disabled + .abs-type {
  opacity: 0.45;
  cursor: default;
}
.abs-type__input:focus-visible + .abs-type { outline: 2px solid var(--accent); outline-offset: 2px; }
.abs-type__n { font-size: var(--text-base); font-weight: var(--weight-medium); }
.abs-type__h { font-size: var(--text-sm); color: var(--gray-500); margin-top: 1px; }

/* Segments matin / après-midi */
.abs-seg {
  display: inline-flex;
  gap: 3px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  padding: 3px;
}
.abs-seg label { position: relative; margin: 0; }
.abs-seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.abs-seg span {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.abs-seg input:checked + span {
  background: #fff;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  box-shadow: 0 2px 8px -2px rgba(16, 24, 40, 0.16);
}

/* Récapitulatif live du formulaire */
.abs-live {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface-sunken);
  border: 1px solid #ECEEF2;
  border-radius: var(--radius-xl);
  padding: 13px 16px;
  margin-top: 14px;
}
.abs-live__d { font-size: var(--text-sm); color: var(--text-secondary); }
.abs-live__n {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

/* ===== Validation manager (approuver / refuser) ===== */
.abs-approve__comment { margin-top: 10px; }
.absence-refuse { margin-top: 10px; }

/* ===== Planning : barres continues façon Gantt =====
   Une barre arrondie par absence (teinte pastel du type, icône + libellé),
   pointillés pour les demandes en attente, colonne du jour surlignée. */
.absence-planning { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.absence-planning__grid {
  display: grid;
  grid-template-columns: minmax(150px, 200px) repeat(var(--day-count, 7), minmax(34px, 1fr));
  align-items: stretch;
  min-width: 680px;
}
.absence-planning__corner { position: sticky; left: 0; }
.absence-planning__day {
  text-align: center;
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 4px 0 10px;
  line-height: 1.35;
}
.absence-planning__day.is-today { color: var(--accent); font-weight: var(--weight-bold); }
.absence-planning__day.is-weekend { opacity: 0.5; }

.absence-planning__user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  padding: 3px 10px 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid #F4F5F9;
  min-height: 46px;
}
.absence-planning__avatar {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-indigo-tint);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  overflow: hidden;
}
.absence-planning__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Piste d'une ligne : fond des jours + barres superposées */
.absence-planning__track {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(var(--day-count, 7), minmax(34px, 1fr));
  align-items: center;
  border-top: 1px solid #F4F5F9;
  min-height: 46px;
}
.absence-planning__bg {
  grid-row: 1;
  height: 100%;
  border-left: 1px solid #F7F8FA;
}
.absence-planning__bg.is-weekend { background: var(--gray-50); }
.absence-planning__bg.is-today { background: var(--brand-indigo-tint-2); }

.absence-planning__bar {
  grid-row: 1;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  margin: 0 3px;
  padding: 0 11px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--tc, var(--absence-masked)) 14%, #fff);
  color: color-mix(in srgb, var(--tc, var(--absence-masked)) 85%, #1A1D24);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  min-width: 0;
  overflow: hidden;
}
.absence-planning__bar-icon {
  width: 13px;
  height: 13px;
  flex: none;
}
.absence-planning__bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Absence d'un seul jour sur grille dense (vue mois) : icône seule, centrée */
.absence-planning__bar.is-compact {
  justify-content: center;
  padding: 0;
  gap: 0;
}

/* Demande en attente : contour pointillé, fond blanc (cf. inspiration) */
.absence-planning__bar.is-pending {
  background: #fff;
  border: 1.5px dashed color-mix(in srgb, var(--tc, var(--absence-masked)) 55%, transparent);
}

/* Légende */
.absence-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.absence-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.absence-legend__swatch--pending {
  display: inline-block;
  width: 14px;
  height: 12px;
  border-radius: var(--radius-full);
  background: #fff;
  border: 1.5px dashed var(--gray-300);
}

/* ===== Panneau d'information du type sélectionné (formulaire) ===== */
.leave-info__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0 0 10px;
}
.leave-info__quota { margin-top: 4px; }
.leave-info__rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid #F4F5F9;
  padding-top: 14px;
}
.leave-info__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.leave-info__row .lucide {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  color: var(--gray-400);
}
.leave-info__rules {
  margin-top: 14px;
  background: var(--brand-indigo-tint-2);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  font-size: var(--text-sm);
  color: var(--gray-700);
  line-height: var(--leading-relaxed);
}
.leave-info-placeholder {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  padding: 34px 20px;
}
.leave-info-placeholder .lucide {
  width: 22px;
  height: 22px;
  color: var(--gray-300);
  margin-bottom: 8px;
}

/* Pastille justificatif dans les listes */
.abs-doc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.abs-doc .lucide { width: 12px; height: 12px; }

/* Upload de justificatif a posteriori dans la carte de demande */
.abs-req__upload {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  max-width: 420px;
}

/* Rangée des compteurs de jours pris */
.abs-balances {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 14px 0 6px;
}

/* Compteur « jours pris » du formulaire — même grammaire que .abs-stat, en
   version encastrée dans la carte du formulaire. */
.abs-taken {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: var(--space-4);
}
.abs-taken__v {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1.1;
}
.abs-taken__v span {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--gray-500);
  margin-left: 4px;
}
.abs-taken__l { font-size: var(--text-sm); color: var(--gray-500); }

/* File de qualification RH : une carte par demande « Autre ». */
.abs-qualify { margin-bottom: var(--space-3); }
.abs-qualify__head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.abs-qualify__head > div { flex: 1; min-width: 0; }
.abs-qualify__reason {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 13px;
  border-radius: var(--radius-lg);
  background: var(--gray-50);
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.abs-qualify__doc { margin-top: 10px; }
.abs-qualify__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-150);
}
.abs-qualify__form > div { flex: 1; min-width: 190px; }
.abs-qualify__actions {
  display: flex;
  gap: 8px;
  flex: none;
}

/* Adresse de télétravail : repliée dans la liste, dépliable à la demande. */
.abs-req__address { margin-top: 6px; font-size: var(--text-sm); }
.abs-req__address summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: var(--weight-medium);
}
.abs-req__address span { display: block; margin-top: 4px; color: var(--gray-600); }