/* ============================================================================
   BIBLIOTHÈQUE CANONIQUE tibida — tibida-ui.css
   ----------------------------------------------------------------------------
   Tout nouveau composant DOIT utiliser ces classes/variables.
   INTERDIT de redéfinir un style de bouton, champ, fenêtre ou texte en local
   dans un fichier : chaque besoin appelle cette bibliothèque.

   Thèmes : suit public/shared/theme.js (TibidaTheme).
     :root                   → valeurs LIGHT (défaut)
     html[data-theme="dark"]  → valeurs DARK (inversées)
   Règle d'Elhadji : jamais de fond transparent pour une fenêtre.
   ========================================================================== */

/* ---- Variables : LIGHT (défaut) ---- */
:root{
  /* Fenêtre : blanc opaque en light */
  --t-modal-bg:#ffffff;
  --t-modal-text:#161616;
  /* Boutons : light = fond noir + texte blanc */
  --t-btn-bg:#161616;
  --t-btn-text:#ffffff;
  --t-btn-hover:#2e2e2e;
  --t-btn-ghost-border:#161616;
  --t-btn-ghost-text:#161616;
  /* Champs */
  --t-field-bg:#ffffff;
  --t-field-border:#e5e5ea;
  --t-field-text:#161616;
  --t-field-placeholder:#48484a;
  /* Texte */
  --t-text:#161616;
  --t-text-muted:#48484a;
  --t-title:#161616;
  /* Voile d'arrière-plan : sombre, jamais transparent */
  --t-backdrop:rgba(29,29,31,.55);
  /* Divers */
  --t-radius:12px;
  --t-shadow:0 20px 60px rgba(0,0,0,.3);
}

/* ---- Variables : DARK (inversé) ---- */
html[data-theme="dark"]{
  /* Fenêtre : fond sombre en dark */
  --t-modal-bg:#1a1a1a;
  --t-modal-text:#f5f5f5;
  /* Boutons : dark = fond blanc + texte noir */
  --t-btn-bg:#ffffff;
  --t-btn-text:#161616;
  --t-btn-hover:#e2e2e2;
  --t-btn-ghost-border:rgba(255,255,255,.4);
  --t-btn-ghost-text:#f5f5f5;
  /* Champs */
  --t-field-bg:#242424;
  --t-field-border:#3a3a3a;
  --t-field-text:#f5f5f5;
  --t-field-placeholder:#a3a3a3;
  /* Texte */
  --t-text:#f5f5f5;
  --t-text-muted:#a3a3a3;
  --t-title:#ffffff;
  /* Voile : identique, sombre, jamais transparent */
  --t-backdrop:rgba(29,29,31,.55);
  --t-shadow:0 20px 60px rgba(0,0,0,.55);
}

/* ==========================================================================
   CLASSES CANONIQUES
   ========================================================================== */

/* ---- Fenêtre ---- */
.t-modal-backdrop{
  position:fixed;inset:0;background:var(--t-backdrop);
  display:flex;align-items:center;justify-content:center;z-index:100;
}
.t-modal{
  background:var(--t-modal-bg);
  color:var(--t-modal-text);
  border-radius:14px;
  width:560px;max-width:94vw;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--t-shadow);
}
.t-modal-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 22px;border-bottom:1px solid var(--t-field-border);
}
.t-modal-body{padding:18px 22px;overflow-y:auto;min-width:0}
.t-modal-foot{
  padding:14px 22px;border-top:1px solid var(--t-field-border);
  display:flex;justify-content:flex-end;gap:10px;
}

/* ---- Boutons ---- */
.t-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;
  border-radius:10px;border:1px solid transparent;
  font-size:14px;font-weight:600;cursor:pointer;
  background:var(--t-btn-bg);color:var(--t-btn-text);
  transition:background .15s ease,opacity .15s ease;
  -webkit-tap-highlight-color:transparent;
  flex:none;
}
.t-btn:hover{background:var(--t-btn-hover)}
.t-btn:active{transform:scale(.98)}
.t-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
/* Alias : le bouton plein canonique */
.t-btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;
  border-radius:10px;border:1px solid transparent;
  font-size:14px;font-weight:600;cursor:pointer;
  background:var(--t-btn-bg);color:var(--t-btn-text);
  transition:background .15s ease,opacity .15s ease;
  -webkit-tap-highlight-color:transparent;
  flex:none;
}
.t-btn-primary:hover{background:var(--t-btn-hover)}
.t-btn-primary:disabled{opacity:.45;cursor:not-allowed}
.t-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;
  border-radius:10px;border:1px solid var(--t-btn-ghost-border);
  font-size:14px;font-weight:600;cursor:pointer;
  background:transparent;color:var(--t-btn-ghost-text);
  transition:background .15s ease;
  -webkit-tap-highlight-color:transparent;
  flex:none;
}
.t-btn-ghost:hover{background:rgba(128,128,128,.14)}
.t-btn-ghost:disabled{opacity:.45;cursor:not-allowed}

/* ---- Champs ---- */
.t-field{
  width:100%;min-height:44px;padding:10px 12px;
  border:1px solid var(--t-field-border);border-radius:10px;
  font-size:16px; /* 16px = pas de zoom auto sur iOS */
  background:var(--t-field-bg);color:var(--t-field-text);
  box-sizing:border-box;
}
.t-field::placeholder{color:var(--t-field-placeholder);opacity:1}
.t-field:focus{outline:2px solid var(--t-btn-bg);outline-offset:1px}
textarea.t-field{min-height:88px;resize:vertical}

/* ---- iOS : aucun zoom auto au focus (règle Elhadji 2026-10-07) ----
   Safari iOS zoome au toucher de tout champ dont la police calculée est
   < 16px, puis la vue zoomée se décale horizontalement : le formulaire
   « déborde ». Sur pointeur tactile (pointer: coarse), tout champ de
   saisie calcule donc à 16px minimum. Ce filet du socle couvre tout
   champ sans règle propre ; les composants qui déclarent leur propre
   taille sont alignés explicitement dans leur CSS.
   Garde bloquante au predeploy : « ios-form-overflow ». */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}
.t-label{
  display:block;margin:10px 0 4px;
  font-weight:600;font-size:13px;color:var(--t-text);
}

/* ---- Textes ---- */
.t-title{
  margin:0;font-size:17px;font-weight:700;color:var(--t-title);
  min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.t-text{color:var(--t-text)}
.t-muted{color:var(--t-text-muted)}

/* ---- Responsive : bottom-sheet sur petit écran (pattern tibida) ---- */
@media (max-width:640px){
  .t-modal-backdrop{align-items:flex-end;justify-content:center;padding:0}
  .t-modal{width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:94vh}
  .t-modal-head{padding:14px 16px}
  .t-modal-body{padding:16px}
  .t-modal-foot{padding:12px 16px}
}

/* ---- Variante large (modals avec beaucoup de contenu) ---- */
.t-modal.wide{width:860px}

/* ---- Boîtes de dialogue (public/shared/dialog.js) ----
   Toasts + alertes/confirmations de TOUTE la plateforme : un seul
   composant, fond opaque (clair/sombre via --t-modal-*), pictogrammes
   dessinés, jamais d'emoji. Remplace l'alert() brut du navigateur. */
#tdlg-stack{
  position:fixed;left:50%;transform:translateX(-50%);bottom:22px;
  z-index:10000;display:flex;flex-direction:column;gap:10px;
  align-items:stretch;width:min(480px,94vw);
}
.tdlg-toast{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--t-modal-bg);color:var(--t-modal-text);
  border:1px solid var(--t-field-border);border-radius:14px;
  box-shadow:var(--t-shadow);padding:14px 14px 14px 16px;
  font-size:15px;line-height:1.45;
  animation:tdlg-in .25s ease;
}
.tdlg-toast.out{opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.tdlg-ico{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#161616;color:#ffffff;
}
html[data-theme="dark"] .tdlg-ico{background:#f5f5f5;color:#161616}
.tdlg-ico svg{width:15px;height:15px}
.tdlg-toast.error .tdlg-ico{background:#48484a;color:#ffffff}
.tdlg-txt{flex:1;min-width:0;padding-top:3px;overflow-wrap:anywhere}
.tdlg-x{
  flex:0 0 auto;background:none;border:0;cursor:pointer;
  color:var(--t-text-muted);font-size:13px;line-height:1;padding:6px;
}
.tdlg-backdrop{
  position:fixed;inset:0;background:var(--t-backdrop);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  z-index:10001;padding:16px;
}
.tdlg-card{
  background:var(--t-modal-bg);color:var(--t-modal-text);
  border-radius:16px;width:440px;max-width:94vw;
  box-shadow:var(--t-shadow);padding:28px 26px 22px;text-align:center;
  animation:tdlg-in .22s ease;
}
.tdlg-card-ico{
  width:52px;height:52px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:#161616;color:#ffffff;
}
html[data-theme="dark"] .tdlg-card-ico{background:#f5f5f5;color:#161616}
.tdlg-card-ico.error{background:#48484a;color:#ffffff}
.tdlg-card-ico svg{width:26px;height:26px}
.tdlg-title{font-size:17px;font-weight:700;margin-bottom:8px}
.tdlg-msg{font-size:15px;line-height:1.55;color:var(--t-modal-text);overflow-wrap:anywhere}
.tdlg-foot{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.tdlg-btn-ghost{background:transparent;color:var(--t-modal-text);border:1px solid var(--t-field-border)}
.tdlg-btn-danger{background:#48484a;color:#ffffff}
@keyframes tdlg-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:640px){
  #tdlg-stack{bottom:14px}
  .tdlg-card{padding:24px 18px 18px}
  .tdlg-foot .t-btn{flex:1}
}