/* ============================================================
   MOSO UI Kit — couche composants commune (chargée APRÈS le
   style de chaque page : elle unifie sans toucher à la logique).
   Niveau de finition aligné sur dashboard.motionsociety.com.
   ============================================================ */

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 14px;border-radius:10px;
  font-family:var(--moso-font-body);font-size:.8rem;font-weight:600;line-height:1;
  border:1px solid var(--moso-border);background:var(--moso-base);color:var(--moso-text);
  cursor:pointer;text-decoration:none;user-select:none;white-space:nowrap;
  box-shadow:var(--moso-shadow-xs);
  transition:transform var(--moso-transition),box-shadow var(--moso-transition),
             background var(--moso-transition),border-color var(--moso-transition),opacity var(--moso-transition);
}
.btn:hover{background:var(--moso-surface-1);border-color:var(--moso-border-strong);transform:translateY(-1px);box-shadow:var(--moso-shadow-card)}
.btn:active{transform:translateY(0);box-shadow:var(--moso-shadow-xs)}
.btn:focus-visible{outline:none;box-shadow:var(--moso-focus)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary,.btn-copy{background:var(--moso-primary);border-color:var(--moso-primary);color:#fff}
.btn-primary:hover,.btn-copy:hover{background:#140d52;border-color:#140d52;opacity:1;box-shadow:0 8px 20px -8px rgba(6,0,59,.45)}
.btn-xs{padding:4px 10px;font-size:.72rem;border-radius:8px;font-weight:600}
.btn-danger{border-color:rgba(255,10,10,.25);color:var(--moso-red)}
.btn-danger:hover{background:rgba(255,10,10,.06);border-color:var(--moso-red)}

/* ---------- Champs de formulaire ---------- */
.f-input,.f-select,.filter-select,.fsel,
.field input[type=text],.field input[type=number],.field input[type=date],
.field input[type=email],.field input[type=url],.field select,.field textarea{
  font-family:var(--moso-font-body);font-size:.84rem;color:var(--moso-text);
  background:var(--moso-base);border:1px solid var(--moso-border);border-radius:10px;
  padding:8px 11px;outline:none;
  transition:border-color var(--moso-transition),box-shadow var(--moso-transition),background var(--moso-transition);
}
.f-select,.filter-select,.fsel,.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%239c98ae' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.f-input:hover,.f-select:hover,.filter-select:hover,.fsel:hover,
.field input:hover,.field select:hover{border-color:var(--moso-border-strong)}
.f-input:focus,.f-select:focus,.filter-select:focus,.fsel:focus,
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--moso-orange);box-shadow:var(--moso-focus);
}
input[type=checkbox]{accent-color:var(--moso-orange)}

/* ---------- Tables ---------- */
table{border-collapse:collapse}
thead th{
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--moso-text-tertiary);padding:9px 12px;text-align:left;
  border-bottom:1px solid var(--moso-border);background:var(--moso-base);
  position:sticky;top:0;z-index:2;
}
tbody td{
  padding:10px 12px;font-size:.82rem;border-bottom:1px solid var(--moso-border-subtle);
  vertical-align:middle;
}
tbody tr{transition:background var(--moso-transition)}
tbody tr:hover{background:var(--moso-surface-1)}
tbody tr:last-child td{border-bottom:none}
td.amount,th.amount,.amount{font-variant-numeric:tabular-nums}

/* ---------- Chips & badges ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;font-size:.68rem;font-weight:600;line-height:1.5;
  letter-spacing:.1px;
}

/* ---------- Tuiles & cartes ---------- */
.tile{
  border:1px solid var(--moso-border);border-radius:var(--moso-r-lg);
  background:var(--moso-base);box-shadow:var(--moso-shadow-xs);
  transition:transform var(--moso-transition),box-shadow var(--moso-transition),border-color var(--moso-transition);
}
.tile[onclick]{cursor:pointer}
.tile[onclick]:hover{transform:translateY(-2px);box-shadow:var(--moso-shadow-card);border-color:var(--moso-border-strong)}
.card,.sec{box-shadow:var(--moso-shadow-card)}

/* ---------- États vides & chargement ---------- */
.empty{
  padding:36px 20px;text-align:center;color:var(--moso-text-tertiary);
  font-size:.85rem;
}
@keyframes ms-shimmer{0%{background-position:-460px 0}100%{background-position:460px 0}}
.skel{
  display:block;border-radius:8px;min-height:14px;
  background:linear-gradient(90deg,var(--moso-surface-1) 25%,var(--moso-surface-2) 37%,var(--moso-surface-1) 63%);
  background-size:920px 100%;animation:ms-shimmer 1.3s ease-in-out infinite;
  color:transparent!important;pointer-events:none;
}
.skel-row{display:flex;flex-direction:column;gap:10px;padding:14px 16px}

/* ---------- Scrollbars fines (WebKit) ---------- */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(6,0,59,.14);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(6,0,59,.26);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Focus clavier global ---------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--moso-focus)}

/* ---------- Titres de pages / headers ---------- */
h1,h2,h3{font-family:var(--moso-font-title)}
.header h1{white-space:nowrap}
.header .mini{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}