/* ═══════════════════════════════════════════════════════
   components.css — Composants partagés entre toutes les pages
   Spinners, empty states, boutons, toast, modals, titres section
═══════════════════════════════════════════════════════ */

/* ── SPINNERS / EMPTY ─────────────────────────── */
.spinner-wrap{display:flex;justify-content:center;align-items:center;padding:40px 0;}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--teal);animation:spin .8s linear infinite;}
.empty-msg{text-align:center;padding:40px 20px;color:var(--muted2);font-size:13px;}
.empty-icon{font-size:32px;margin-bottom:8px;}
.add-btn{
  width:100%;padding:11px;border-radius:12px;border:none;
  background:var(--dark);color:white;
  font-family:'Nunito',sans-serif;font-size:13.5px;font-weight:700;
  cursor:pointer;margin-top:8px;
}
.add-btn:hover{background:#1a5c20;}
.add-btn.secondary{background:white;color:var(--dark);border:1px solid var(--line);}
.add-btn.secondary:hover{background:var(--cream);}

/* ── TOAST ────────────────────────────────────── */
#toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--dark);color:white;
  padding:11px 20px;border-radius:12px;font-size:13px;font-weight:600;font-family:'Nunito',sans-serif;
  opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;
  z-index:999;box-shadow:var(--shadow-lg);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── MODAL ────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(13,59,17,.25);backdrop-filter:blur(4px);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-box{background:white;border-radius:20px;padding:28px;max-width:480px;width:100%;box-shadow:var(--shadow-lg);max-height:80vh;overflow-y:auto;}
.modal-title{font-family:'Bitter',serif;font-size:18px;font-weight:700;color:var(--dark);margin-bottom:16px;}

/* ── SECTION TITLES ───────────────────────────── */
.section-title{font-family:'Bitter',serif;font-size:13px;font-weight:700;color:var(--dark);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.section-title-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;}