/* assets/css/styles.css
 * Design basé sur la charte ExpoSphere : Montserrat, violet moderne, formes modulaires.
 * Palette principale: #8213FF, #3D0395, #07041C, #EEE7F7, #F4F2F7
 */
:root{
  --bg:#F4F2F7;
  --bg-soft:#EEE7F7;
  --text:#07041C;
  --primary:#8213FF;
  --primary-dark:#3D0395;
  --muted:#5d5a70;
  --card:#ffffff;
  --border:#e5e2ef;
  --success:#16a34a;
  --danger:#dc2626;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--bg-soft));color:var(--text);font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;min-height:100%}
.container{max-width:1100px;margin:0 auto;padding:24px}
.app-header{position:sticky;top:0;background:linear-gradient(90deg,var(--primary),var(--primary-dark));color:#fff;border-bottom:1px solid rgba(255,255,255,.1);z-index:10}
.app-header .brand{font-weight:800;letter-spacing:.2px;text-decoration:none;color:#fff;font-size:20px;display:inline-flex;align-items:center;gap:10px}
.logo-o{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--primary-dark);font-weight:800}
.app-header nav{float:right;display:flex;gap:16px}
.app-header nav a{color:#fff;text-decoration:none;opacity:.95}
.app-header nav a:hover{opacity:1;text-decoration:underline}

h1,h2,h3{margin:0 0 12px 0}
h1{font-size:28px;font-weight:800}
h2{font-size:22px;font-weight:700}
h3{font-size:18px;font-weight:700}
p{line-height:1.7}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 30px rgba(7,4,28,.06);margin:18px 0;overflow:hidden}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(90deg,rgba(130,19,255,.06),rgba(61,3,149,.04))}
.card-body{padding:20px}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.table th{text-align:left;font-weight:700}
.badge{ margin-top:6px }
.inline-form{display:inline-flex;gap:8px;align-items:center}
label{font-weight:600;margin:6px 0 4px 0;display:block}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
textarea{min-height:90px}
.btn{appearance:none;border:none;background:linear-gradient(90deg,var(--primary),var(--primary-dark));color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(1.03)}
.btn-outline{appearance:none;background:transparent;border:1px solid var(--primary);color:var(--primary);padding:9px 14px;border-radius:12px;font-weight:700;cursor:pointer}
.btn-outline:hover{background:rgba(130,19,255,.08)}

.alert{border-radius:12px;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25);color:#991b1b;padding:12px 14px;margin-bottom:12px}
.notice{border-radius:12px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.25);color:#14532d;padding:12px 14px;margin-bottom:12px}
.muted{color:var(--muted);font-size:14px}
.mt{margin-top:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:16px 0}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

.stat{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;text-align:center}
.stat-num{font-size:28px;font-weight:800}
.stat-label{color:var(--muted)}

.auth-card{max-width:420px;margin:40px auto;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(7,4,28,.06)}
.auth-card h1{text-align:center;margin-bottom:16px}

.app-motifs{position:absolute;inset:0;pointer-events:none;opacity:.08}
.app-motifs div{position:absolute;border:2px solid var(--primary);border-radius:16px}
.app-motifs .m1{width:140px;height:80px;top:60px;left:10%}
.app-motifs .m2{width:80px;height:120px;bottom:80px;right:12%}
/* ===== Badges de statut (tableau) ===== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  line-height:1;
  border:1px solid transparent;
  white-space:nowrap;
}
.badge + .badge { margin-left:6px; }

.badge-dot{
  width:8px; height:8px; border-radius:999px; display:inline-block;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04) inset;
}

/* Étiquette "Obligatoire" discrète */
.badge--required{
  color:#334155;
  background:rgba(148,163,184,.18);
  border-color:rgba(148,163,184,.35);
}

/* Couleurs par statut */
.badge--pending{
  color:#854d0e;
  background:rgba(250,204,21,.16);
  border-color:rgba(250,204,21,.35);
}
.badge--pending .badge-dot{ background:#f59e0b; }

.badge--approved{
  color:#065f46;
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.35);
}
.badge--approved .badge-dot{ background:#22c55e; }

.badge--rejected{
  color:#7f1d1d;
  background:rgba(239,68,68,.15);
  border-color:rgba(239,68,68,.35);
}
.badge--rejected .badge-dot{ background:#ef4444; }

.badge--missing{
  color:#334155;
  background:rgba(148,163,184,.18);
  border-color:rgba(148,163,184,.35);
}
.badge--missing .badge-dot{ background:#94a3b8; }

/* Mode sombre (si vous utilisez data-theme="dark") */
:root[data-theme="dark"] .badge--pending{
  color:#fbbf24; background:rgba(250,204,21,.12); border-color:rgba(250,204,21,.28);
}
:root[data-theme="dark"] .badge--approved{
  color:#34d399; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.28);
}
:root[data-theme="dark"] .badge--rejected{
  color:#f87171; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.28);
}
:root[data-theme="dark"] .badge--missing{
  color:#cbd5e1; background:rgba(148,163,184,.12); border-color:rgba(148,163,184,.24);
}
.btn.btn--chat{ background:#10b981; color:#fff; border:1px solid #059669; }
.btn.btn--chat::before{ content:"💬"; }

/* ====== Header d’événement modernisé ====== */
.card-header--event{
  background:linear-gradient(90deg,rgba(130,19,255,.06),rgba(61,3,149,.04));
  border-bottom:1px solid var(--border);
}
.event-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.event-title h2{ margin:0; font-size:20px; font-weight:800; }
.event-actions .btn{ padding:10px 14px; border-radius:12px; }
.btn.btn--chat{ background:#10b981; color:#fff; border:1px solid #059669; }
.btn.btn--chat:hover{ filter:brightness(1.05); }

/* ====== Tableau Mes événements (modern) ====== */
.table-responsive{ width:100%; overflow:auto; -webkit-overflow-scrolling:touch; }
.table.table--events{
  width:100%;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:var(--card);
  box-shadow:0 10px 30px rgba(7,4,28,.06);
  border-collapse:separate; /* pour conserver radius */
  border-spacing:0;
}
.table.table--events thead th{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(90deg,rgba(130,19,255,.06),rgba(61,3,149,.04));
  font-weight:800; font-size:.92rem;
  padding:14px 14px;
  border-bottom:1px solid var(--border);
}
.table.table--events tbody td{
  padding:14px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.table.table--events tbody tr:nth-child(odd){ background:rgba(7,4,28,.015); }
.table.table--events tbody tr:hover{ background:rgba(130,19,255,.04); }

/* Colonnes */
.table.table--events .col-piece{ min-width:320px; }
.table.table--events .col-statut{ min-width:220px; }
.table.table--events .col-action{ min-width:320px; white-space:nowrap; }

/* Contenu de la colonne Pièce */
.doc-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.doc-name{ font-weight:800; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:700; padding:4px 8px; border-radius:999px;
  border:1px solid rgba(148,163,184,.35); background:rgba(148,163,184,.18); color:#334155;
}
.chip--required{}

/* Micro métadonnée sous statut */
.meta.micro{ font-size:.78rem; color:#6b7280; margin-top:4px; }

/* Actions compactes et fichier */
.inline-form--tight{ gap:10px; }
.file-input{ max-width:260px; }

/* Accessibilité focus */
.table.table--events a:focus-visible, .table.table--events button:focus-visible, .table.table--events input[type="file"]:focus-visible{
  outline:2px solid rgba(130,19,255,.6); outline-offset:2px; box-shadow:0 0 0 4px rgba(130,19,255,.12);
}

/* Mobile */
@media (max-width: 820px){
  .event-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .event-actions{ width:100%; display:flex; justify-content:flex-start; }
  .table.table--events .col-action{ white-space:initial; }
  .inline-form{ flex-wrap:wrap; }
  .file-input{ max-width:100%; }
}

/* Dark mode */
:root[data-theme="dark"] .table.table--events{
  background:#0b1220; border-color:#0f172a; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .table.table--events thead th{
  background:linear-gradient(90deg,rgba(130,19,255,.18),rgba(61,3,149,.12));
}
:root[data-theme="dark"] .chip{ color:#e2e8f0; background:rgba(148,163,184,.12); border-color:rgba(148,163,184,.28); }

/* === Footer normal (pas fixé) + sticky-footer propre === */

/* === Footer normal (pas fixé) + layout scrollable === */

/* 1) S'assurer qu'aucune règle ailleurs ne fixe le footer */
.app-footer{
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  z-index: auto !important;
}

/* 2) Layout global : body en colonne, page scrollable */
html, body{
  height: 100%;
}

body{
  display: flex;
  flex-direction: column;
  overflow-y: auto;      /* ✅ garantit le scroll */
}

/* 3) Le <main class="container"> prend la place dispo entre header et footer */
body > main.container{
  flex: 1 1 auto;
  display: block;
  min-height: 0;
}

/* 4) Le footer reste en bas si page courte, mais ne recouvre rien */
body > footer.app-footer{
  flex-shrink: 0;
  margin-top: 0;
}