/* =====================================================
   🎨 PALETTE DE BASE
   ===================================================== */
:root{
  --bg:#0f172a;--panel:#111827;--card:#1f2937;--text:#e5e7eb;--muted:#9ca3af;
  --accent:#22d3ee;--accent2:#3b82f6;--ok:#10b981;--warn:#f59e0b;--bad:#ef4444;--border:#2b3443;
  /* Ajout typographie configurable (fallback pour ne pas changer le rendu existant) */
  --font-size:16px;
  --font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif
}

/* =====================================================
   🧱 STRUCTURE GLOBALE
   ===================================================== */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:var(--font-family, system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif);
  font-size:var(--font-size,16px);
  background:var(--bg);color:var(--text)
}
a{color:var(--accent);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--accent2)}

/* =====================================================
   🧭 EN-TÊTE
   ===================================================== */
header{
  background:var(--panel);border-bottom:1px solid var(--border);
  padding:.5rem 1rem; /* équiv. 8px 16px, proche de l’existant */
  display:flex;gap:16px;align-items:center;justify-content:space-between;color:var(--text)
}
header .flex{display:flex;align-items:center;gap:1rem}
nav a{margin-right:12px}

/* =====================================================
   ⚙️ RÉGLAGES (ajout du bloc demandé)
   ===================================================== */
.settings{position:relative;margin-left:1rem;cursor:pointer;user-select:none}
.settings-menu{
  display:none;position:absolute;right:0;top:2rem;background:var(--card);
  border:1px solid var(--border);border-radius:.5rem;padding:.75rem 1rem;z-index:100;min-width:220px
}
.settings-menu.active{display:block}
.settings-menu label{display:block;margin:.5rem 0;font-size:.9rem}
select,input[type="range"],input[type="color"]{
  width:100%;background:var(--panel);color:var(--text);
  border:1px solid var(--border);border-radius:.25rem;padding:.25rem;margin-top:.25rem
}
fieldset{
  border:1px solid var(--border);border-radius:.5rem;margin-top:.75rem;padding:.5rem
}
fieldset legend{font-size:.9rem;color:var(--muted)}
button.reset-btn{
  margin-top:.75rem;width:100%;padding:.4rem;background:var(--bad);color:#fff;border:none;border-radius:.4rem;cursor:pointer
}
button.reset-btn:hover{opacity:.9}

/* =====================================================
   📦 CARTES & CONTAINERS
   ===================================================== */
.container{max-width:100%;margin:24px auto;padding:1rem 16px} /* 1rem = 16px */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:20px;margin-bottom:20px;box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:border-color .2s ease,transform .2s ease;word-wrap:break-word;overflow:hidden
}
.card:hover{border-color:var(--accent2);transform:translateY(-2px)}

/* =====================================================
   📝 TITRES
   ===================================================== */
h1,h2{margin:0 0 12px 0}
h1{font-size:26px;font-weight:700}
h2{font-size:18px;font-weight:600;color:var(--muted)}

/* =====================================================
   🧾 FORMULAIRES
   ===================================================== */
label{display:block;margin:8px 0 4px;color:var(--muted);font-size:14px}
input,select,textarea{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);font-size:15px
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--panel)}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(200%)}

/* =====================================================
   🔘 BOUTONS
   ===================================================== */
button,.btn{
  display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#001026;border:none;padding:10px 14px;border-radius:12px;font-weight:600;
  cursor:pointer;transition:all .2s ease
}
button:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.2)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}

/* =====================================================
   📐 GRILLES & LAYOUTS
   ===================================================== */
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* =====================================================
   📊 TABLES & BADGES
   ===================================================== */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px;text-align:left}
.table th{color:var(--muted);text-transform:uppercase;font-size:13px}
.badge{padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border);color:var(--muted)}
.badge.ok{border-color:#14532d;color:#86efac}
.badge.warn{border-color:#713f12;color:#fde68a}
.badge.bad{border-color:#7f1d1d;color:#fecaca}

/* =====================================================
   ⚙️ UTILITAIRES
   ===================================================== */
.flex{display:flex;gap:12px;align-items:center}
.right{margin-left:auto}
.alert{
  padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:var(--bg);margin-bottom:12px
}
.small{font-size:12px;color:var(--muted)}
hr{border:0;border-top:1px solid var(--border);margin:12px 0}
.kbd{
  border:1px solid var(--border);border-bottom-width:2px;padding:2px 6px;border-radius:6px;
  font-family:ui-monospace,Menlo,Consolas,monospace
}

/* =====================================================
   📅 AGENDA
   ===================================================== */
.agenda-grid{
  overflow:auto;border:1px solid var(--border);border-radius:12px;background:var(--bg);
  box-shadow:inset 0 0 12px rgba(0,0,0,.4)
}
.agenda-table{width:100%;border-collapse:collapse;font-size:13px;color:var(--text)}
.agenda-table th{
  background:var(--panel);position:sticky;top:0;font-weight:600;color:var(--accent);
  border-bottom:2px solid var(--border)
}
.agenda-table th,.agenda-table td{border:1px solid var(--border);padding:6px;text-align:center;vertical-align:middle}
.agenda-hour{width:70px;white-space:nowrap}

/* =====================================================
   🟩 ÉVÉNEMENTS
   ===================================================== */
.event{
  position:relative;background:var(--event-gradient,linear-gradient(135deg,#4facfe,#00f2fe));
  color:#fff;padding:6px 8px;border-radius:8px;font-weight:600;margin:3px 0;
  box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .1s ease,box-shadow .1s ease
}
.event:hover{transform:scale(1.03);box-shadow:0 3px 8px rgba(0,0,0,.3)}
.event strong{display:block;margin-bottom:2px}
.event .desc{font-size:.85em;margin-top:2px}
.delete-link{
  display:inline-block;font-size:.8em;color:rgba(255,255,255,.7);
  text-decoration:underline;margin-top:4px;transition:color .2s
}
.delete-link:hover{color:#ffb3b3;text-decoration:none}

/* =====================================================
   🧭 STATUTS
   ===================================================== */
small em{
  display:inline-block;padding:2px 8px;border-radius:6px;font-style:normal;font-weight:600;
  text-transform:capitalize;font-size:.75rem;color:#fff;background:#6c757d;
  box-shadow:0 1px 2px rgba(0,0,0,.15);opacity:.95
}
small em.presence{background:var(--ok)}
small em.deplacement{background:var(--accent2)}
small em.conge{background:var(--bad)}
/* Non standard : conservé pour compat. */
small em:contains("presence"){background:#28a745}
small em:contains("deplacement"){background:#007bff}
small em:contains("conge"){background:#dc3545}

/* =====================================================
   💾 MODAL & FORM BOX
   ===================================================== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;z-index:100
}
.modal{
  display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;
  background:rgba(0,0,0,.7);justify-content:center;align-items:center;backdrop-filter:blur(4px)
}
.form-box{
  position:relative;background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:20px;width:90%;max-width:420px;box-shadow:0 6px 20px rgba(0,0,0,.4)
}
.form-box h3{margin:0 0 15px;color:var(--accent)}
.modal-content{
  background:#111827;color:#f1f5f9;padding:25px;border-radius:12px;width:90%;max-width:600px;
  box-shadow:0 8px 30px rgba(0,0,0,.6);border:1px solid #1e293b;animation:fadeIn .2s ease-in-out
}
.modal-content h2{margin-top:0;color:#93c5fd;font-weight:500}
.modal-content label{font-size:.9rem;color:#cbd5e1}
.modal-content textarea,
.modal-content input[type="file"],
.modal-content input[type="date"]{
  background:#1e293b;color:#f1f5f9;border:1px solid #334155;border-radius:6px;padding:8px;width:100%
}
.modal-content textarea:focus,.modal-content input:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 4px #2563eb}
.modal-content .btn{
  background:linear-gradient(135deg,#2563eb,#38bdf8);color:#fff;border:none;padding:8px 16px;border-radius:6px;
  font-weight:500;cursor:pointer;transition:background .3s
}
.modal-content .btn:hover{background:linear-gradient(135deg,#1d4ed8,#0ea5e9)}
.modal-content .btn-outline{background:transparent;color:#f1f5f9;border:1px solid #475569}
.modal-content .btn-outline:hover{background:#334155}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.close-btn{
  position:absolute;top:10px;right:15px;font-size:26px;font-weight:700;color:var(--muted);
  background:none;border:none;cursor:pointer
}
.close-btn:hover{color:var(--text)}
.loading-overlay{
  position:absolute;inset:0;background:rgba(15,23,42,.9);color:var(--accent);font-weight:700;
  display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:1.1em
}

/* =====================================================
   ➕ BOUTON FLOTTANT (FAB)
   ===================================================== */
.fab{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#001026;font-size:36px;font-weight:500;
  border:none;box-shadow:0 4px 12px rgba(0,0,0,.4);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,box-shadow .2s ease;position:fixed;right:calc(24px + env(safe-area-inset-right));
  bottom:calc(24px + env(safe-area-inset-bottom));z-index:1000;animation:fab-pop .3s ease-out
}
.fab:hover{transform:scale(1.08);box-shadow:0 6px 18px rgba(34,211,238,.4)}
.fab:active{transform:scale(.95);box-shadow:0 2px 8px rgba(0,0,0,.4)}
@keyframes fab-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.floating-btn{
  position:fixed;bottom:25px;right:25px;background:linear-gradient(135deg,#2196f3,#00bcd4);color:#fff;border:none;border-radius:50%;
  width:64px;height:64px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 15px rgba(0,0,0,.4);transition:transform .2s ease,box-shadow .3s ease;z-index:999
}
.floating-btn:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,188,212,.5)}
.floating-btn svg{width:28px;height:28px;color:#fff;display:block;pointer-events:none}

/* =====================================================
   ⚫ FOOTER
   ===================================================== */
footer{
  color:var(--muted);text-align:center;padding:40px 0;font-size:14px;border-top:1px solid var(--border)
}

/* =====================================================
   🎨 COULEUR AGENDA
   ===================================================== */
.user-color-picker{display:flex;justify-content:flex-end;margin-bottom:15px}
.color-form{
  display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);
  border-radius:10px;padding:8px 12px
}
.color-form label{font-weight:600;color:#ccc}
.color-input{
  width:60px;height:40px;border:2px solid #555;border-radius:6px;background:none;cursor:pointer;
  box-shadow:0 0 8px rgba(0,0,0,.3);transition:transform .2s ease,box-shadow .2s ease
}
.color-input:hover{transform:scale(1.1);box-shadow:0 0 10px rgba(255,255,255,.3)}
.color-hex{color:#aaa;font-family:monospace;font-size:.95em;min-width:70px;text-align:center}
.btn-save{background:#1e88e5;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:.9em;cursor:pointer;transition:background .2s ease}
.btn-save:hover{background:#42a5f5}
.checkbox-line{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.checkbox-line input[type="checkbox"]{width:1.1rem;height:1.1rem;accent-color:#007bff}
.checkbox-line small{font-weight:400;opacity:.8}
.settings-panel{
  display:none;position:absolute;right:10px;top:50px;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:12px;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:2000;animation:fadeIn .2s ease
}
.settings-panel.active{display:block}

/* =====================================================
   ⏱️ COMPTEUR DE TEMPS
   ===================================================== */
.timer-card{
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;margin-top:20px;
  box-shadow:0 6px 18px rgba(0,0,0,.3);text-align:center
}
.timer-card h1{font-size:22px;color:var(--accent);margin-bottom:10px}
.timer-card p{color:var(--muted);font-size:15px;margin-bottom:20px;line-height:1.4}
.timer-card .btn{font-size:16px;padding:12px 24px}
.timer-result{
  margin-top:20px;padding:16px;background:var(--panel);border:1px solid var(--border);border-radius:12px;
  text-align:left;color:var(--text);box-shadow:inset 0 0 10px rgba(0,0,0,.3);animation:fadeIn .4s ease
}
.timer-result h2{color:var(--accent2);font-size:18px;margin:0 0 10px}
.timer-result p{margin:4px 0;font-size:14px}
.timer-result hr{border:0;border-top:1px solid var(--border);margin:10px 0}

/* =====================================================
   📱 RESPONSIVE (alignements uniquement)
   ===================================================== */
@media (max-width:768px){
  header{flex-direction:column;align-items:flex-start;gap:.5rem}
  nav{display:flex;flex-wrap:wrap;gap:.5rem}
  .grid.grid-2{grid-template-columns:1fr}
  .timer-card{padding:18px}
  .timer-result{font-size:13px}
  .timer-result p strong{display:block;margin-top:4px}
  .btn,button{width:100%;max-width:280px;margin:0 auto}
}

/* BOUTON PLAGE CONGES*/
.btn-outline {
  background: transparent;
  border: 2px dashed var(--accent);
  color: var(--accent);
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  background: var(--accent);
  color: #001026;
}

/* === Tooltips personnalisées pour les réactions === */
.tooltip-parent {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 41, 59, 0.95);
  color: #f1f5f9;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  transform-origin: bottom center;
  z-index: 10;
}

.tooltip-parent:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}


/* =====================================================
   👥 INVITEE SELECTOR & EDIT LINK
   ===================================================== */
.invitee-selector {
  margin-bottom: 8px;
}
.invitee-search-wrapper {
  position: relative;
}
.invitee-search-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
.invitee-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 180px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  z-index: 100;
}
.invitee-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s;
}
.invitee-option:hover {
  background: var(--accent2);
  color: #fff;
}
.invitee-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.invitee-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent2);
  color: #fff;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 13px;
}
.invitee-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  margin-left: 2px;
}
.invitee-remove:hover {
  color: #fff;
}
.edit-link {
  color: #fff !important;
  text-decoration: underline;
  font-size: 12px;
  display: inline-block;
  margin-right: 6px;
  opacity: .85;
}
.edit-link:hover {
  opacity: 1;
}

/* =====================================================
   📅 VUE JOUR - Style Google Calendar (overlap)
   ===================================================== */
.agenda-day .user-name-cell {
  vertical-align: top !important;
  min-width: 140px;
  max-width: 160px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card);
}

/* =====================================================
   🎨 AJUSTEMENT VUE JOUR (ÉVÉNEMENTS EMPILÉS)
   ===================================================== */
.day-timeline-cell {
  margin: 4px 6px;        /* Ajoute un espace de 6px à gauche/droite pour décoller des bordures */
  text-align: left;       /* Aligne le texte à gauche à l'intérieur de la bulle */
  word-break: break-word; /* Évite que le texte ne dépasse si le mot est trop long */
}
/* Bandeau événements journée entière */
.allday-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px 4px;
  margin-bottom: 2px;
}
.allday-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: #fff;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  max-width: 100%;
}
.allday-badge strong {
  margin-right: 4px;
}
.allday-badge small {
  opacity: .85;
  font-size: 11px;
}
.allday-badge em {
  font-size: 10px;
  background: rgba(255,255,255,.2);
  padding: 1px 5px;
  border-radius: 4px;
  font-style: normal;
}

/* Timeline events normaux */
.day-timeline {
  position: relative;
  width: 100%;
  min-height: 34px;
}
.day-event {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  transition: z-index 0s, box-shadow .15s, transform .1s;
  white-space: nowrap;
}
.day-event:hover {
  z-index: 10 !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.5);
  transform: scaleY(1.15);
  transform-origin: top;
  overflow: visible !important;
  height: auto !important;
  min-height: 60px;
  white-space: normal;
}
.day-event-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow: hidden;
}
.day-event:hover .day-event-inner {
  overflow: visible;
}
.day-event-inner strong {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.day-event-inner small {
  font-size: 10px;
  opacity: .9;
}
.day-event-inner em {
  font-size: 9px;
  background: rgba(255,255,255,.2);
  padding: 0 4px;
  border-radius: 3px;
  display: inline-block;
  width: fit-content;
  font-style: normal;
}
.day-event-type {
  font-size: 10px;
  opacity: .8;
}
.day-event-desc {
  font-size: 10px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.day-event-actions {
  display: inline-flex;
  gap: 3px;
}
.day-event-actions a {
  font-size: 11px;
  color: #fff !important;
  opacity: .8;
}
.day-event-actions a:hover {
  opacity: 1;
}