/*
 * soukly-ui.css — Système de composants UI unifiés Soukly
 * Modales · Toasts · Popovers · Drawers · Scrims
 * Importé sur toutes les pages du site
 */

/* ─────────────────────────────────────────────
   VARIABLES COMMUNES (si non définies par la page)
───────────────────────────────────────────── */
:root {
  --ui-radius: 18px;
  --ui-radius-sm: 12px;
  --ui-radius-pill: 999px;
  --ui-shadow-modal: 0 32px 80px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.14), 0 0 0 1px rgba(255,255,255,.07);
  --ui-shadow-popup: 0 12px 40px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.10), 0 0 0 1px rgba(255,255,255,.06);
  --ui-shadow-toast: 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12);
  --ui-blur: blur(14px);
  --ui-scrim: rgba(6, 10, 20, 0.70);
  --ui-enter-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-exit-ease: cubic-bezier(0.4, 0, 1, 1);
}

/* ═══════════════════════════════════════════
   1. SCRIM (fond d'obscurcissement)
═══════════════════════════════════════════ */
.sk-scrim {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--ui-scrim);
  backdrop-filter: var(--ui-blur);
  -webkit-backdrop-filter: var(--ui-blur);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.sk-scrim.sk-open {
  opacity: 1;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════
   2. MODAL — fenêtre centrée
═══════════════════════════════════════════ */
.sk-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
}
.sk-modal.sk-open {
  pointer-events: auto;
  opacity: 1;
}

.sk-modal-card {
  position: relative;
  background: var(--surface, #1a1f2e);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-modal);
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px;
  transform: translateY(20px) scale(0.97);
  transition: transform 280ms var(--ui-enter-spring), opacity 250ms ease;
  opacity: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.sk-modal-card::-webkit-scrollbar { width: 4px; }
.sk-modal-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }

.sk-modal.sk-open .sk-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Variantes de taille */
.sk-modal-card.sk-lg { max-width: 900px; padding: 0; }
.sk-modal-card.sk-md { max-width: 620px; }
.sk-modal-card.sk-sm { max-width: 420px; padding: 24px; }

/* En-tête de modal */
.sk-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.sk-modal-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.35px;
  line-height: 1.25;
  color: var(--text, #f0f4ff);
}
.sk-modal-subtitle {
  font-size: 13px;
  color: var(--text-3, rgba(200,210,240,.55));
  margin-top: 3px;
}

/* Bouton fermer */
.sk-modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2, rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-2, rgba(200,210,240,.7));
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.sk-modal-close:hover {
  background: rgba(240, 68, 56, 0.12);
  border-color: rgba(240, 68, 56, 0.25);
  color: #f04438;
  transform: scale(1.06);
}
.sk-modal-close svg { pointer-events: none; }

/* Pied de modal */
.sk-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
}

/* ═══════════════════════════════════════════
   3. DRAWER — panneau latéral
═══════════════════════════════════════════ */
.sk-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1310;
  width: min(440px, 95vw);
  background: var(--surface, #1a1f2e);
  border-left: 1px solid rgba(255,255,255,.07);
  box-shadow: -20px 0 60px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  opacity: 0;
  transition: transform 300ms var(--ui-enter-spring), opacity 220ms ease;
}
.sk-drawer.sk-open {
  transform: translateX(0);
  opacity: 1;
}

.sk-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sk-drawer-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.sk-drawer-body { flex: 1; overflow-y: auto; padding: 8px 22px 20px; scrollbar-width: thin; }
.sk-drawer-foot {
  display: flex;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: var(--surface, #1a1f2e);
}
.sk-drawer-foot .sk-btn { flex: 1; }

/* ═══════════════════════════════════════════
   4. TOASTS — notifications éphémères
═══════════════════════════════════════════ */
.sk-toasts {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2600;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}

.sk-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: var(--ui-radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: var(--ui-shadow-toast);
  pointer-events: auto;
  cursor: default;
  min-width: 240px;
  max-width: 420px;
  border: 1px solid rgba(255,255,255,.1);
  animation: sk-toast-in 280ms var(--ui-enter-spring) forwards;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@keyframes sk-toast-in {
  from { opacity: 0; transform: translateY(18px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sk-toast-out {
  to { opacity: 0; transform: translateY(10px) scale(0.97); }
}
.sk-toast.sk-out { animation: sk-toast-out 220ms var(--ui-exit-ease) forwards; }

/* Variantes */
.sk-toast.sk-info {
  background: rgba(26, 32, 55, 0.96);
  color: rgba(220,228,255,.95);
}
.sk-toast.sk-success {
  background: rgba(15, 44, 36, 0.96);
  border-color: rgba(18,183,106,.25);
  color: #4ade80;
}
.sk-toast.sk-error {
  background: rgba(50, 18, 18, 0.96);
  border-color: rgba(240,68,56,.25);
  color: #f87171;
}
.sk-toast.sk-warn {
  background: rgba(45, 33, 8, 0.96);
  border-color: rgba(246,173,43,.25);
  color: #fbbf24;
}

/* Icône du toast */
.sk-toast-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.sk-toast.sk-info    .sk-toast-icon { background: rgba(26,92,255,.2); }
.sk-toast.sk-success .sk-toast-icon { background: rgba(18,183,106,.2); }
.sk-toast.sk-error   .sk-toast-icon { background: rgba(240,68,56,.2); }
.sk-toast.sk-warn    .sk-toast-icon { background: rgba(246,173,43,.2); }

/* ═══════════════════════════════════════════
   5. POPOVER — menu contextuel flottant
═══════════════════════════════════════════ */
.sk-popover {
  position: fixed;
  z-index: 1500;
  width: min(320px, 90vw);
  background: var(--surface, #1a1f2e);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  box-shadow: var(--ui-shadow-popup);
  padding: 6px;
  transform-origin: top right;
  animation: sk-pop-in 180ms var(--ui-enter-spring);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
@keyframes sk-pop-in {
  from { opacity: 0; transform: scale(0.93) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.sk-popover.sk-closing {
  animation: sk-pop-out 160ms var(--ui-exit-ease) forwards;
}
@keyframes sk-pop-out {
  to { opacity: 0; transform: scale(0.94) translateY(-4px); }
}

.sk-pop-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3, rgba(200,210,240,.45));
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 8px 12px 4px;
}
.sk-pop-sep {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 4px 8px;
}
.sk-pop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-2, rgba(200,210,240,.75));
  font-weight: 500;
  transition: background 130ms ease, color 130ms ease;
  user-select: none;
}
.sk-pop-item:hover {
  background: rgba(255,255,255,.07);
  color: var(--text, #f0f4ff);
}
.sk-pop-item.sk-danger:hover {
  background: rgba(240,68,56,.12);
  color: #f04438;
}
.sk-pop-item-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
}
.sk-pop-item-label { flex: 1; }
.sk-pop-item-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent, #1a5cff);
  color: #fff;
}

/* ═══════════════════════════════════════════
   6. CONFIRMATION DIALOG — action destructive
═══════════════════════════════════════════ */
.sk-confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 26px;
  margin: 0 auto 18px;
}
.sk-confirm-icon.sk-danger { background: rgba(240,68,56,.12); }
.sk-confirm-icon.sk-warn   { background: rgba(246,173,43,.12); }
.sk-confirm-icon.sk-info   { background: rgba(26,92,255,.12); }

.sk-confirm-title {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.3px;
}
.sk-confirm-body {
  font-size: 14px;
  color: var(--text-2, rgba(200,210,240,.7));
  text-align: center;
  line-height: 1.6;
  margin-top: 10px;
}

/* ═══════════════════════════════════════════
   7. BADGE DE STATUT
═══════════════════════════════════════════ */
.sk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--ui-radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15px;
}
.sk-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sk-badge.sk-active  { background: rgba(18,183,106,.12);  color: #12b76a; }
.sk-badge.sk-active::before  { background: #12b76a; box-shadow: 0 0 0 3px rgba(18,183,106,.2); animation: sk-pulse 2s ease-out infinite; }
.sk-badge.sk-pending { background: rgba(246,173,43,.12); color: #f6ad2b; }
.sk-badge.sk-pending::before { background: #f6ad2b; }
.sk-badge.sk-sold    { background: rgba(26,92,255,.10);   color: #1a5cff; }
.sk-badge.sk-sold::before    { background: #1a5cff; }
.sk-badge.sk-expired { background: rgba(200,210,240,.07); color: rgba(200,210,240,.5); }
.sk-badge.sk-expired::before { background: rgba(200,210,240,.5); }
.sk-badge.sk-refused { background: rgba(240,68,56,.10);   color: #f04438; }
.sk-badge.sk-refused::before { background: #f04438; }

@keyframes sk-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(18,183,106,.2); }
  50%       { box-shadow: 0 0 0 6px rgba(18,183,106,.0); }
}

/* ═══════════════════════════════════════════
   8. RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .sk-toasts {
    bottom: 18px;
    max-width: calc(100vw - 24px);
  }
  .sk-toast { min-width: unset; width: 100%; }
  .sk-modal { padding: 12px; }
  .sk-modal-card { padding: 20px; border-radius: 16px; }
  .sk-modal-card.sk-lg { border-radius: 16px; }
  .sk-drawer { width: 100vw; }
  .sk-popover { width: min(300px, 90vw); }
}

/* ═══════════════════════════════════════════
   9. ACCESSIBILITÉ
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sk-modal, .sk-modal-card, .sk-scrim, .sk-drawer,
  .sk-toast, .sk-popover {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════
   10. BOUTONS SK — utilisés dans les dialogs
       générés dynamiquement par soukly-ui.js
═══════════════════════════════════════════ */
.sk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all 160ms ease;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.sk-btn:active { transform: scale(0.97); }

.sk-btn-primary {
  background: var(--accent, #1a5cff);
  color: #fff;
  box-shadow: 0 4px 16px rgba(26,92,255,.35);
}
.sk-btn-primary:hover {
  background: var(--accent-dark, #1248e0);
  box-shadow: 0 6px 20px rgba(26,92,255,.45);
  transform: translateY(-1px);
}

.sk-btn-danger {
  background: #f04438;
  color: #fff;
  box-shadow: 0 4px 16px rgba(240,68,56,.3);
}
.sk-btn-danger:hover {
  background: #d93025;
  box-shadow: 0 6px 20px rgba(240,68,56,.4);
  transform: translateY(-1px);
}

.sk-btn-warn {
  background: #f6ad2b;
  color: #1a1a1a;
  box-shadow: 0 4px 14px rgba(246,173,43,.3);
}
.sk-btn-warn:hover { background: #e09b1a; transform: translateY(-1px); }

.sk-btn-ghost {
  background: var(--surface-2, rgba(255,255,255,.06));
  color: var(--text-2, rgba(200,210,240,.75));
  border: 1px solid rgba(255,255,255,.09);
}
.sk-btn-ghost:hover {
  background: var(--surface-3, rgba(255,255,255,.10));
  color: var(--text, #f0f4ff);
}

/* Tailles */
.sk-btn.sk-sm { padding: 8px 16px; font-size: 13px; border-radius: 10px; }
.sk-btn.sk-lg { padding: 13px 30px; font-size: 15px; }