/* Aijoo — styles de la console d'administration.
   S'appuie sur les variables et composants de style.css (--coral, .scard, .tg, .sbtn…). */

/* bouton Admin du rail : léger séparateur au-dessus */
.rail .nav button.admin-nav{margin-top:8px}
.rail .nav button.admin-nav::after{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:24px;height:1px;background:rgba(255,255,255,.12)}

/* ---------- onglets de modules ---------- */
.atabs{display:flex;flex-wrap:wrap;gap:6px;background:var(--blush);padding:5px;border-radius:14px;margin-bottom:26px}
.atabs button{padding:9px 16px;border-radius:10px;font-size:.88rem;font-weight:600;color:var(--coral-deep);transition:.15s;white-space:nowrap}
.atabs button:hover{color:var(--ink)}
.atabs button.on{background:var(--paper);box-shadow:var(--shadow-sm);color:var(--ink)}

.apanel{display:none}
.apanel.on{display:block;animation:fade .3s ease}

/* en-tête de section interne + bouton d'ajout */
.asec-head{display:flex;align-items:center;justify-content:space-between;margin:4px 0 14px}
.asec-head h2{font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.asec-head .hint{font-size:.82rem;color:var(--ink-faint);margin-top:2px}
.addbtn{font-weight:700;font-size:.85rem;border-radius:11px;padding:9px 15px;display:inline-flex;align-items:center;gap:7px;
  color:#fff;background:linear-gradient(135deg,var(--coral),var(--coral-deep));box-shadow:0 8px 18px -10px rgba(239,108,77,.9);transition:.15s;flex:none}
.addbtn:hover{transform:translateY(-1px)}
.addbtn svg{width:15px;height:15px}

/* ---------- 1. Membres ---------- */
.mrow{display:flex;align-items:center;gap:15px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:15px 18px;margin-bottom:11px;box-shadow:var(--shadow-sm);transition:.15s;position:relative}
.mrow:hover{border-color:#F0C9BB}
.mrow .pic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:1.15rem;flex:none}
.mrow .meta{flex:1;min-width:0}
.mrow .meta .t{font-weight:700;font-size:1rem;display:flex;align-items:center;gap:9px}
.mrow .meta .s{font-size:.83rem;color:var(--ink-faint);margin-top:2px}
.role{font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.role.admin{background:#FBEDE6;color:var(--coral-deep)}
.role.parent{background:#EEEAFB;color:#6B5BC0}
.role.enfant{background:#EAF0E2;color:#5C7A3F}
.mrow .acts{display:flex;gap:6px;flex:none}
.iconbtn{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--ink-faint);border:1px solid var(--line);transition:.14s;background:#FFFCF7}
.iconbtn:hover{color:var(--coral-deep);border-color:#F0C9BB;background:var(--peach)}
.iconbtn svg{width:16px;height:16px}
.iconbtn.danger:hover{color:var(--warn)}

/* ---------- 2. Connexions API ---------- */
.conncard{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:14px;box-shadow:var(--shadow-sm);transition:.15s}
.conncard:hover{box-shadow:var(--shadow-md)}
.conncard .ch{display:flex;align-items:center;gap:13px}
.conncard .logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:1.2rem;flex:none}
.conncard .ch .nm{font-weight:800;font-size:1.05rem}
.conncard .ch .vd{font-size:.8rem;color:var(--ink-faint)}
.conncard .ch .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.pill{font-size:.72rem;font-weight:700;padding:4px 11px;border-radius:99px;display:inline-flex;align-items:center;gap:6px}
.pill::before{content:"";width:7px;height:7px;border-radius:50%}
.pill.connected{background:#EAF0E2;color:#4d6a33}.pill.connected::before{background:#5C7A3F}
.pill.unconfigured{background:#F4ECDF;color:var(--ink-faint)}.pill.unconfigured::before{background:#C9BFAF}
.pill.error{background:#FBEDE6;color:var(--warn)}.pill.error::before{background:var(--warn)}
.conncard .body{margin-top:16px;display:grid;gap:13px}
.fieldrow{display:flex;align-items:center;gap:12px}
.fieldrow > label{width:130px;font-size:.85rem;font-weight:600;color:var(--ink-soft);flex:none}
.keyfield{flex:1;display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;background:#FFFCF7;overflow:hidden}
.keyfield:focus-within{border-color:var(--coral);box-shadow:0 0 0 4px rgba(239,108,77,.12)}
.keyfield input{flex:1;border:none;background:none;padding:11px 13px;font-size:.9rem;letter-spacing:.04em;color:var(--ink)}
.keyfield input:focus{outline:none}
.keyfield .rev{width:40px;display:grid;place-items:center;color:var(--ink-faint);align-self:stretch;border-left:1px solid var(--line-soft)}
.keyfield .rev:hover{color:var(--coral-deep)}
.keyfield .rev svg{width:17px;height:17px}
.usage{height:7px;border-radius:99px;background:var(--blush);overflow:hidden;flex:1}
.usage > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--coral-soft),var(--coral))}
.conncard .footer{margin-top:16px;padding-top:15px;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:14px}
.defwrap{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-soft);cursor:pointer}
.radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:.14s}
.radio.on{border-color:var(--coral)}.radio.on::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--coral)}

/* ---------- 3. Profils enfants ---------- */
.kidcard{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.kidcard .kh{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.kidcard .pic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:1.2rem;flex:none}
.kidcard .kh .nm{font-weight:800;font-size:1.08rem}
.kidcard .kh .ag{font-size:.82rem;color:var(--ink-faint)}
.krow{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line-soft)}
.krow .lab{flex:1}.krow .lab .t{font-weight:600;font-size:.92rem}.krow .lab .d{font-size:.8rem;color:var(--ink-faint);margin-top:2px}
.provtoggles{display:flex;flex-wrap:wrap;gap:8px}
.provchip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);font-size:.82rem;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.14s;background:#FFFCF7}
.provchip .d{width:9px;height:9px;border-radius:50%;background:var(--ink-faint)}
.provchip.on{border-color:transparent;color:#fff}
.provchip.off{opacity:.55}

/* puces de sujets (bloqués / scope) */
.chips-edit{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.chip-x{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:99px;background:var(--blush);color:var(--coral-deep);font-size:.8rem;font-weight:600}
.chip-x button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--coral-deep);font-size:.85rem;line-height:1}
.chip-x button:hover{background:rgba(213,81,47,.15)}
.chip-add{padding:6px 12px;border-radius:99px;border:1px dashed var(--line);color:var(--ink-faint);font-size:.8rem;font-weight:600}
.chip-add:hover{border-color:var(--coral);color:var(--coral-deep)}

/* ---------- 4. Mémoire interne (vue admin) ---------- */
.memadmin .mcard{padding-bottom:13px}
.mcard .mfoot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line-soft)}
.scope-tag{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:99px;background:#F4ECDF;color:var(--ink-soft)}
.scope-tag.global{background:#FBEDE6;color:var(--coral-deep)}
.inject-lab{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-faint)}
.tg.sm{width:38px;height:22px}.tg.sm::after{width:16px;height:16px}.tg.sm.on::after{left:19px}

/* ---------- 5. Comportement ---------- */
.directive{width:100%;min-height:120px;border:1px solid var(--line);border-radius:14px;background:#FFFCF7;padding:15px 17px;font-family:inherit;font-size:.94rem;line-height:1.5;color:var(--ink);resize:vertical}
.directive:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 4px rgba(239,108,77,.12)}
.preview{background:linear-gradient(135deg,#2A2622,#241F1B);border-radius:18px;padding:22px;color:#EDE3D5;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.preview .pl{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#C8A593;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:14px}
.preview pre{white-space:pre-wrap;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.82rem;line-height:1.6;color:#F2E9DB}
.preview .tagline{margin-top:14px;font-size:.76rem;color:#9D9183}
.preview .accent{color:var(--coral-soft)}

@media(max-width:680px){
  .fieldrow{flex-direction:column;align-items:stretch;gap:7px}
  .fieldrow > label{width:auto}
  .atabs{overflow-x:auto}
}

/* ---- Indicateur d'enregistrement ---- */
.admin-toast{
  position:fixed; right:22px; bottom:22px; z-index:200;
  background:var(--ink); color:#fff; font-family:"Figtree",sans-serif;
  font-size:.9rem; font-weight:600; padding:11px 18px; border-radius:12px;
  box-shadow:0 10px 30px rgba(42,38,34,.28);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.admin-toast.show{ opacity:1; transform:translateY(0); }
@media (max-width:680px){ .admin-toast{ left:16px; right:16px; bottom:16px; text-align:center; } }

/* ============ Modale admin autonome ============ */
body.amodal-lock{ overflow:hidden; }
.amodal{
  position:fixed; inset:0; z-index:300;
  display:none; align-items:flex-start; justify-content:center;
}
.amodal.open{ display:flex; }
.amodal-backdrop{
  position:absolute; inset:0;
  background:rgba(42,38,34,.46); backdrop-filter:blur(2px);
  animation:amodal-fade .2s ease;
}
.amodal-dialog{
  position:relative; z-index:1;
  width:min(960px,calc(100% - 32px));
  max-height:92vh; margin:max(16px,4vh) 0;
  display:flex; flex-direction:column;
  background:var(--cream,#FBF7F1); border:1px solid var(--line,#EEE5D8);
  border-radius:20px; overflow:hidden;
  box-shadow:0 24px 70px rgba(42,38,34,.34);
  animation:amodal-pop .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes amodal-fade{ from{opacity:0} to{opacity:1} }
@keyframes amodal-pop{ from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }
.amodal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 24px 14px; background:var(--paper,#fff);
  border-bottom:1px solid var(--line,#EEE5D8);
}
.amodal-head h1{ margin:4px 0 0; font-size:1.5rem; }
.amodal-x{
  flex:none; width:36px; height:36px; border-radius:10px;
  border:1px solid var(--line,#EEE5D8); background:var(--cream,#FBF7F1);
  font-size:1.3rem; line-height:1; color:var(--ink,#2A2622); cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.amodal-x:hover{ background:var(--blush,#FBEDE6); transform:scale(1.05); }
.amodal .atabs{ margin:16px 24px 0; }
.amodal-body{ padding:22px 24px 26px; overflow:auto; }
@media (max-width:680px){
  .amodal-dialog{ width:100%; max-height:100vh; margin:0; border-radius:0; }
  .amodal-head h1{ font-size:1.25rem; }
}
