/* ═══════════════════════════════════════════════════════════════════
   assets/syn-admin.css — Admin, Utilisateurs, Références, Journal et
   leurs fenêtres (refonte, lot 6)

   Chargée après syn-achats.css. Tout est sous l'une de ces racines
   (liste ADM) ; :is() garde la spécificité d'un id. Couleurs : jetons
   du thème. Les couleurs posées par l'utilisateur (groupes, zones)
   restent en ligne.
   ADM : #page-users #page-refs #page-logs #userOverlay
         #itemOverlay
   (lot 25 : #page-admin et les fenêtres Données sont retirées)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Titres et en-têtes ──────────────────────────────────────── */
:is(#page-users, #page-refs, #page-logs) .pageHead .title,
:is(#page-users, #page-refs, #page-logs) h3.title{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--tx); }
:is(#page-users, #page-refs, #page-logs) .pageHead .sub{ color:var(--mu); font-size:14px; }
/* Lot 24 : les cartes vers le coffre sont des liens <a> (lot 15) : sans soulignement ni couleur de lien. */

/* Sections : des cartes, titre net, libellés discrets */

/* Sous-onglets : pastilles, une ligne qui défile */

/* ── Champs ──────────────────────────────────────────────────── 
   Libellés et champs de formulaire : syn-communs.css (section 6), pour
   tout le site. Ici, seulement les autres champs des pages (recherche). */
:is(#page-users, #page-refs, #page-logs) :is(input.input, select.input, textarea.input){
  border:1px solid var(--bd); border-radius:var(--r); background:var(--surface, #fff); color:var(--tx); font-family:var(--f); box-shadow:none;
  transition:border-color var(--tC), box-shadow var(--tC); }
:is(#page-users, #page-refs, #page-logs) :is(input.input, select.input, textarea.input):focus{
  border-color:var(--syn); box-shadow:0 0 0 3px var(--synT); outline:none; }
:is(#page-users, #page-refs, #page-logs) input.input[type="search"], :is(#page-users, #page-refs, #page-logs) .pageHead + .divider + * input.input{ height:44px; }

/* ── Boutons ─────────────────────────────────────────────────── */
:is(#page-users, #page-refs, #page-logs, #userOverlay, #itemOverlay) .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:var(--r); font-family:var(--f); font-weight:700;
  background:var(--syn); color:#fff; border:1px solid transparent; box-shadow:none; text-shadow:none; background-image:none; }
:is(#page-users, #page-refs, #page-logs, #userOverlay, #itemOverlay) .btn:hover{ background:var(--synD); }
:is(#page-users, #page-refs, #page-logs, #userOverlay, #itemOverlay) .btn.green{ background:var(--syn); }
:is(#page-users, #page-refs, #page-logs, #userOverlay, #itemOverlay) .btn.secondary{
  background:var(--surface, #fff); color:var(--tx); border-color:var(--bd); }
:is(#page-users, #page-refs, #page-logs, #userOverlay, #itemOverlay) .btn.secondary:hover{
  border-color:var(--syn); color:var(--syn); background:var(--surface, #fff); }
:is(#page-users, #page-refs, #page-logs, #userOverlay, #itemOverlay) .btn.danger{
  background:var(--surface, #fff); color:var(--red); border-color:color-mix(in srgb, var(--red) 35%, transparent); }
:is(#page-users, #page-refs, #page-logs, #userOverlay, #itemOverlay) .btn.danger:hover{ background:var(--red); color:#fff; }
:is(#page-users, #page-refs, #page-logs, #userOverlay, #itemOverlay) .btn:disabled{ opacity:.5; cursor:not-allowed; }
:is(#page-users, #page-refs, #page-logs, #userOverlay, #itemOverlay) .btn svg{ width:16px; height:16px; flex:0 0 auto; }
:is(#page-refs, #page-logs, #page-users) :is(#logsClear, #usersClear){ width:44px; height:44px; padding:0; }
:is(#page-refs, #page-logs, #page-users) .btnExport{ border-radius:var(--r); font-family:var(--f); font-weight:700; background:var(--surface, #fff);
  color:var(--tx); border:1px solid var(--bd); box-shadow:none; }
:is(#page-refs, #page-logs, #page-users) .btnExport:hover{ border-color:var(--syn); color:var(--syn); }
/* Petits boutons d'icône */
:is(#page-users, #page-refs, #itemOverlay) .refBtn{ border-radius:calc(var(--r) - 2px); border:1px solid var(--bd);
  background:var(--surface, #fff); color:var(--mu); box-shadow:none; }
:is(#page-users, #page-refs, #itemOverlay) .refBtn:hover{ border-color:var(--syn); color:var(--syn); }
:is(#page-users, #page-refs) .refBtn.refBtnDel:hover{ border-color:var(--red); color:var(--red); }

/* Retour d'action et vides */
:is(#itemOverlay) .admFeedback{ color:var(--ok); font-weight:700; }
:is(#page-users, #page-refs, #page-logs) .admEmpty{ border:1px dashed var(--bd); border-radius:calc(var(--r) + 2px); padding:22px 14px; text-align:center; color:var(--mu); background:none; }

/* ── Références ──────────────────────────────────────────────── */

/* ── Journal ─────────────────────────────────────────────────── */
#page-logs .logRow{ --lc:var(--mu); background:var(--surface, #fff); border:1px solid var(--bd); border-left:4px solid var(--lc); border-radius:calc(var(--r) + 2px);
  box-shadow:none; padding:10px 14px; margin-bottom:8px; }
#page-logs .logRow--green{ --lc:var(--ok); } #page-logs .logRow--red{ --lc:var(--red); } #page-logs .logRow--blue{ --lc:var(--syn); }
#page-logs .logRow--orange{ --lc:var(--amb); } #page-logs .logRow--muted{ --lc:var(--mu); }
#page-logs .logRow-icon{ width:28px; height:28px; border-radius:8px; display:inline-grid; place-items:center; flex:0 0 auto;
  background:color-mix(in srgb, var(--lc) 12%, transparent); color:var(--lc); font-size:14px; }
#page-logs .logRow-icon svg{ width:15px; height:15px; }
#page-logs .logRow-time{ color:var(--mu); font-size:12.5px; font-variant-numeric:tabular-nums; }

/* ── Utilisateurs ────────────────────────────────────────────── */
:is(#page-users, #page-refs) :is(.refBtn, .userContactBtn) svg{ width:16px; height:16px; }
:is(#page-users, #page-refs) :is(.refBtn, .userContactBtn){ display:inline-grid; place-items:center; }

/* ── Fenêtres ────────────────────────────────────────────────── */
:is(#userOverlay, #itemOverlay) :is(.modal, .modalBox, .modalCard){ border-radius:calc(var(--r) + 8px); }
:is(#userOverlay, #itemOverlay) .loginTitle{ font-family:var(--f); font-weight:800; letter-spacing:-.01em; }

/* ── Téléphone ───────────────────────────────────────────────── */
@media (max-width:640px){
  :is(#page-users, #page-refs, #page-logs) .pageHead .title { font-size:20px; }
  :is(#page-users, #page-refs, #page-logs) :is(input.input, select.input, textarea.input){ font-size:16px; }
  :is(#page-users, #page-refs, #page-logs) .btn{ min-height:42px; }
  :is(#page-users, #page-refs) .refBtn{ min-width:40px; min-height:40px; }
  /* En-têtes : le texte à gauche, les actions dessous (l'ancien style les alignait à droite). */
  :is(#page-users, #page-refs, #page-logs) .pageHead{ flex-direction:column; align-items:stretch; text-align:left; gap:12px; }
  :is(#page-users, #page-refs, #page-logs) .pageHeadText{ order:0; text-align:left; flex:0 0 auto; }
  :is(#page-users, #page-refs, #page-logs) .pageHeadActions{ order:1; display:flex; gap:8px; justify-content:stretch; }
  :is(#page-users, #page-refs, #page-logs) .pageHeadActions > *{ flex:1 1 0; }
  /* Données : la recherche sur toute la ligne. */
}

:root.anims-off :is(#page-users, #page-refs, #page-logs) *{ transition:none !important; animation:none !important; }
@media (prefers-reduced-motion:reduce){ :is(#page-users, #page-refs, #page-logs) *{ transition:none !important; animation:none !important; } }