/* Repos compensatoire à planifier : alerte « Action requise » (direction et salarié).
   Rouge = à planifier, orange = demande en attente, vert = planifié. Le reste de l'interface garde son calme : seul ce bloc porte la couleur d'alerte. */

/* ---------- bloc de la direction (accueil, Heures supplémentaires) ---------- */
.rest-block { display: grid; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--alert-red) 35%, var(--line)); border-top: 5px solid var(--alert-red); border-radius: var(--radius); }
.rest-title { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.rest-title h2 { display: flex; align-items: center; gap: 10px; color: var(--bad); }
.rest-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--alert-red); color: #fff; display: inline-grid; place-items: center; font: 800 1rem/1 var(--font-title); }
.rest-count { color: var(--bad); font-weight: 700; font-size: .9rem; }
.rest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.rest-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.rest-card.rs-to_plan { background: color-mix(in srgb, var(--bad-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--alert-red) 40%, var(--line)); }
.rest-card.rs-pending { background: color-mix(in srgb, var(--warn-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--alert-orange) 50%, var(--line)); }
.rest-card.rs-planned { background: color-mix(in srgb, var(--ok-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--alert-green) 45%, var(--line)); }
.rest-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rest-body { display: grid; gap: 3px; min-width: 0; }
.rest-who { font-size: 1.02rem; }
.rest-who .btn-link { font-weight: 800; padding: 0; min-height: 0; }
.rest-text { overflow-wrap: anywhere; }
.rest-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* Pastille de statut : rond de couleur + libellé, jamais la couleur seule. */
.rest-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; border: 1px solid transparent; white-space: nowrap; }
.rest-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.rest-badge.rs-to_plan { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.rest-badge.rs-to_plan .rest-dot { background: var(--alert-red); }
.rest-badge.rs-pending { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.rest-badge.rs-pending .rest-dot { background: var(--alert-orange); }
.rest-badge.rs-planned { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.rest-badge.rs-planned .rest-dot { background: var(--alert-green); }
/* « Action requise » : le repère le plus visible, tant qu'une journée n'est pas posée. */
.rest-action { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--bad); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.rs-pending .rest-action { background: var(--warn); }

/* Dossier du salarié (direction) */
.rest-fiche.open { border-color: color-mix(in srgb, var(--alert-red) 45%, var(--line)); border-top: 4px solid var(--alert-red); }

/* Pastille dans le planning de la direction */
.badge.rest-flag { display: inline-block; margin: 2px 0 0 6px; padding: 1px 8px; font-size: .7rem; font-weight: 800; border: 1px solid transparent; }
.badge.rest-flag.rs-to_plan { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.badge.rest-flag.rs-pending { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* ---------- centre de notifications ---------- */
.notif-badge { display: inline-block; justify-self: start; padding: 1px 8px; border-radius: 6px; background: var(--bad); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.notif.priority { border-color: color-mix(in srgb, var(--alert-red) 55%, var(--line)); background: color-mix(in srgb, var(--bad-bg) 55%, var(--surface)); }
.notif.priority.unread::before { background: var(--alert-red); }
.notif.priority .notif-title { font-weight: 800; color: var(--bad); }
.notif-action { flex: none; align-self: center; margin: 0 12px 0 0; white-space: nowrap; }
@media (max-width: 480px) { .notif-action { margin: 0 0 10px 68px; } }

/* ---------- espace salarié ---------- */
.rest-emp { display: grid; gap: 8px; border-width: 1px; }
.rest-emp h2 { font-size: 1.1rem; }
.rest-emp.rs-to_plan { background: color-mix(in srgb, var(--bad-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--alert-red) 45%, var(--line)); border-top: 5px solid var(--alert-red); }
.rest-emp.rs-pending { background: color-mix(in srgb, var(--warn-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--alert-orange) 55%, var(--line)); border-top: 5px solid var(--alert-orange); }
.rest-emp.rs-planned { background: color-mix(in srgb, var(--ok-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--alert-green) 45%, var(--line)); border-top: 5px solid var(--alert-green); }
.rest-emp .buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.rest-emp .buttons .btn-primary { flex: 1 1 220px; }