/* =========================
   Admin Auth Layout
   ========================= */

/* Variables (complète les --ct-* utilisés plus bas) */
:root{
    --ct-primary: rgb(63,111,103);
    --ct-primary-2: rgb(52,98,91);
    --ct-link: rgba(31,41,55,.90);
    --ct-muted: rgba(31,41,55,.60);
    --ct-border: rgba(20,30,40,.10);
    --ct-focus: 0 0 0 4px rgba(63,111,103,.18);
    --ct-shadow-soft: 0 10px 25px rgba(16,24,40,.08);
}

/* Reset minimal (évite les débordements padding/width) */
*,
*::before,
*::after{
    box-sizing: border-box;
}

/* Page */
.ct-authBody{
    min-height: 100vh;
    background:
        radial-gradient(900px 480px at 20% 10%, rgba(63,111,103,.18), transparent 60%),
        radial-gradient(900px 520px at 80% 30%, rgba(148,163,184,.22), transparent 55%),
        linear-gradient(180deg, rgba(245,247,250,1), rgba(242,246,248,1));
    color: rgba(31,41,55,.90);
}

/* Topbar minimal (logo + retour) */
.ct-authTopbar{
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255,255,255,.55);
    border-bottom: 1px solid rgba(20,30,40,.06);
}

.ct-authTopbar__inner{
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ct-authTopbar__brand img{
    height: 34px;
    width: auto;
    display: block;
}

.ct-authTopbar__back{
    border-radius: 999px;
    padding: 10px 14px;
}

/* Main */
.ct-authMain{
    padding: 26px 0 18px;
}

/* IMPORTANT : .ct-auth sert au layout de la section.
   Si tu mets class="ct-auth" sur <form>, on annule le padding pour éviter toute surprise. */
.ct-auth{
    padding: 12px 0 24px;
}
form.ct-auth{
    padding: 0;
}

/* Wrap */
.ct-auth__wrap{
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 18px;
}

/* Card container */
.ct-authCard{
    border-radius: 26px;
    border: 1px solid rgba(20,30,40,.08);
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(16,24,40,.10);

    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 340px;
}

/* Left side */
.ct-authCard__aside{
    position: relative;
    padding: 26px 26px;
    border-right: 1px solid rgba(20,30,40,.06);
    background:
        radial-gradient(560px 260px at 25% 30%, rgba(63,111,103,.14), transparent 60%),
        radial-gradient(520px 240px at 70% 75%, rgba(148,163,184,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.20));
}

.ct-authCard__badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(20,30,40,.08);
    background: rgba(255,255,255,.65);
    color: rgba(31,41,55,.72);
    font-weight: 900;
    font-size: 12.5px;
}

.ct-authCard__title{
    margin: 14px 0 6px;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.6px;
    color: rgba(31,41,55,.92);
}

.ct-authCard__sub{
    margin: 0;
    color: rgba(31,41,55,.70);
    font-weight: 650;
    line-height: 1.55;
    font-size: 14px;
    max-width: 460px;
}

.ct-authCard__chips{
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ct-authCard__note{
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(20,30,40,.06);
    color: rgba(31,41,55,.70);
    font-weight: 650;
    font-size: 13.5px;
}

/* Right side (form) */
.ct-authCard__formCol{
    padding: 26px 26px;
    display: flex;
    align-items: center;

    /* Fix grid/flex overflow : autoriser le rétrécissement */
    min-width: 0;
}

/* Le contenu de la colonne (form / wrapper) doit pouvoir prendre 100% */
.ct-authCard__formCol > *{
    width: 100%;
    min-width: 0;
}

/* Si tu utilises ce composant "ct-authForm" ailleurs */
.ct-authForm{
    width: 100%;
    display: grid;
    gap: 14px;
    min-width: 0;
}

.ct-authForm__group{
    display: grid;
    gap: 7px;
    min-width: 0;
}

.ct-authForm__label{
    font-weight: 900;
    font-size: 13px;
    color: rgba(31,41,55,.72);
}

.ct-authForm__input{
    height: 52px;
    width: 100%;
    max-width: 100%;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid rgba(20,30,40,.12);
    background: rgba(255,255,255,.74);
    outline: none;
    font-weight: 750;
    color: rgba(31,41,55,.86);
    display: block;
    min-width: 0;
}

.ct-authForm__input:focus{
    border-color: rgba(63,111,103,.34);
    box-shadow: 0 0 0 4px rgba(63,111,103,.12);
}

/* Row: remember + forgot */
.ct-authForm__row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}

.ct-authForm__check{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(31,41,55,.70);
    font-weight: 750;
    font-size: 13.5px;
    user-select: none;
}

.ct-authForm__check input{
    width: 16px;
    height: 16px;
}

.ct-authForm__link{
    color: rgba(63,111,103,.95);
    font-weight: 850;
    text-decoration: none;
    font-size: 13.5px;
}

.ct-authForm__link:hover{
    text-decoration: underline;
}

/* Submit button */
.ct-authForm__submit{
    width: 100%;
    border-radius: 16px;
    height: 52px;
}

/* Small hint */
.ct-authForm__hint{
    padding-top: 10px;
    border-top: 1px solid rgba(20,30,40,.06);
    color: rgba(31,41,55,.60);
    font-weight: 650;
    font-size: 12.8px;
}

/* Footer minimal */
.ct-authFooter{
    padding: 14px 0 24px;
    color: rgba(31,41,55,.58);
    font-weight: 650;
    font-size: 13px;
}

.ct-authFooter__inner{
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ct-authFooter__right a{
    color: rgba(31,41,55,.62);
    text-decoration: none;
    font-weight: 750;
}

.ct-authFooter__right a:hover{
    text-decoration: underline;
}

.ct-authFooter__sep{
    margin: 0 8px;
    opacity: .6;
}

/* -------------------------
   Champs / labels génériques
-------------------------- */
.ct-field{
    margin-bottom: 14px;
    min-width: 0;
}

.ct-label{
    display: block;
    font-weight: 850;
    color: rgba(31,41,55,.78);
    margin: 0 0 8px;
    font-size: 13.5px;
}

/* Champ générique */
.ct-input{
    width: 100%;
    max-width: 100%;
    height: 52px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(20,30,40,.12);
    background: rgba(255,255,255,.72);
    outline: none;
    font-weight: 750;
    color: rgba(31,41,55,.86);
    display: block;
    min-width: 0;
}

.ct-input:focus{
    border-color: rgba(63,111,103,.30);
    box-shadow: 0 0 0 4px rgba(63,111,103,.10);
}

/* Erreur */
.ct-input.is-invalid{
    border-color: rgba(220,38,38,.45);
    box-shadow: 0 0 0 4px rgba(220,38,38,.12);
}

.ct-field__error{
    display: none;
    margin-top: 8px;
    font-size: 12.8px;
    font-weight: 750;
    color: rgba(220,38,38,.90);
}

/* Alerte globale (serveur) */
.ct-alert{
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(20,30,40,.10);
    background: rgba(255,255,255,.55);
    font-weight: 750;
}

.ct-alert--error{
    border-color: rgba(220,38,38,.22);
    background: rgba(220,38,38,.06);
    color: rgba(127,29,29,.95);
}

/* Ligne liens / actions */
.ct-auth__row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 14px;
}

.ct-check{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #334155;
    user-select: none;
}

.ct-check input[type="checkbox"]{
    width: 16px;
    height: 16px;
    accent-color: var(--ct-primary);
}

/* Liens */
a.ct-link{
    color: var(--ct-link);
    font-weight: 700;
    text-decoration: none;
    position: relative;
}

a.ct-link::after{
    content:"";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: currentColor;
    opacity: .15;
    transform: scaleX(.6);
    transform-origin: left;
    transition: transform .15s ease, opacity .15s ease;
}

a.ct-link:hover::after{
    opacity: .35;
    transform: scaleX(1);
}

a.ct-link:focus-visible{
    outline: none;
    box-shadow: var(--ct-focus);
    border-radius: 8px;
    padding: 2px 4px;
    margin: -2px -4px;
}

/* -------------------------
   Boutons (fusionné : plus de doublon)
-------------------------- */
.ct-btn{
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 800;
    user-select: none;
    transition: transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.ct-btn--lg{
    padding: 14px 18px;
    font-size: 15px;
}

.ct-btn--primary{
    background: var(--ct-primary);
    color: #fff;
    box-shadow: 0 12px 24px rgba(31,111,99,.18);
}

.ct-btn--primary:hover{
    background: var(--ct-primary-2);
}

.ct-btn--primary:active{
    transform: translateY(1px);
}

.ct-btn:focus-visible{
    outline: none;
    box-shadow: var(--ct-focus);
}

.ct-btn:disabled{
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

/* Texte d’aide sous bouton */
.ct-auth__hint{
    margin-top: 10px;
    color: var(--ct-muted);
    font-size: 13px;
    line-height: 1.35;
}

/* Petit bouton “Retour au site” */
.ct-topAction{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--ct-border);
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 800;
    color: #0f172a;
    text-decoration: none;
    box-shadow: var(--ct-shadow-soft);
}

.ct-topAction:hover{
    border-color: rgba(31,111,99,.35);
}

/* Wrap pour mettre un bouton dans le champ */
.ct-inputWrap{
    position: relative;
}

/* Bouton œil (si page login) */
.ct-passToggle{
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.ct-passToggle:hover{
    background: rgba(15, 23, 42, .04);
    border-color: rgba(148, 163, 184, .45);
    color: #0f172a;
}

.ct-passToggle:focus-visible{
    outline: none;
    box-shadow: 0 0 0 4px rgba(31,111,99,.18);
    border-color: rgba(31,111,99,.35);
}

.ct-passToggle .ct-ico{
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.ct-passToggle .ct-ico--eyeOff{
    display: none;
}

.ct-passToggle.is-on .ct-ico--eye{
    display: none;
}

.ct-passToggle.is-on .ct-ico--eyeOff{
    display: inline;
}

/* -------------------------
   FIX MFA : 90% uniquement sur l’input #code + anti-dépassement
   (ultra spécifique + !important pour gagner contre tout)
-------------------------- */
#ctAdminMfaSetup{
    width: 100%;
    min-width: 0;
}

#ctAdminMfaSetup .ct-field{
    width: 100%;
    min-width: 0;
}

/* Cible unique : input code */
#ctAdminMfaSetup input#code.ct-input{
    width: 90% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block;
    min-width: 0;

    margin-left: auto;
    margin-right: auto;
}

/* -------------------------
   Responsive (1 seul bloc, pas de doublon)
-------------------------- */
@media (max-width: 980px){
    .ct-authCard{
        grid-template-columns: 1fr;
    }
    .ct-authCard__aside{
        border-right: 0;
        border-bottom: 1px solid rgba(20,30,40,.06);
    }
    .ct-authCard__title{
        font-size: 26px;
    }
    main.ct-authMain{
        padding-top: 18px;
    }
}

/* Confort accessibilité */
@media (prefers-reduced-motion: reduce){
    *{
        transition: none !important;
    }
}

.ct-authCard__formCol{
    align-items:flex-start;
}
.ct-alert--belowQr{
    width:100%;
    margin:10px 0 14px;
}

/* Colonne MFA : on empile proprement (stop la condensation) */
.ct-mfaCol{
    display: flex;
    flex-direction: column;
    align-items: stretch;     /* au lieu de center */
    gap: 14px;
    width: 100%;
    min-width: 0;
}

/* Zone haute QR */
.ct-mfaTop{
    width: 100%;
    min-width: 0;
}

/* Mise en page QR + side */
.ct-mfaGrid{
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ct-mfaQrBox{
    width: 220px;
    height: 220px;
    border-radius: 16px;
    border: 1px solid rgba(20,30,40,.10);
    background: rgba(255,255,255,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ct-mfaSide{
    flex: 1;
    min-width: 240px;
}

.ct-mfaSecretRow{
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Messages : respirent + ne cassent pas le layout */
.ct-alert--belowQr{
    width: 100%;
    margin: 8px 0 0;
}

/* Zone basse (form) */
.ct-mfaBottom{
    width: 100%;
    min-width: 0;
}

/* Recovery codes : plus clean */
.ct-mfaRecoveryBox{
    border: 1px solid rgba(20,30,40,.10);
    background: rgba(255,255,255,.65);
    border-radius: 16px;
    padding: 12px;
}

.ct-mfaRecoveryList{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ct-mfaRecoveryCode{
    padding: 6px 10px;
}

.ct-row-title {
    font-weight: 600;
}
.ct-row-desc {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}
.ct-muted {
    color: #6c757d;
    font-size: 12px;
}
.ct-admin-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}
.ct-admin-title {
    margin:0;
}
.ct-admin-subtitle {
    margin:6px 0 0 0;
    color:#6c757d;
    font-size:13px;
}
.ct-admin-actions {
    display:flex;
    gap:10px;
}
.ct-empty {
    padding: 18px;
    text-align:center;
}
/* Code pill ellipsis + tooltip natif via title */
.ct-aiCode{
    display:inline-flex;
    align-items:center;
    padding:10px 14px;            /* ton style “pill” */
    border:1px solid rgba(0,0,0,.14);
    border-radius:999px;
    background: rgba(0,0,0,.03);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}

.ct-aiCode--ellipsis{
    max-width: 260px;             /* ajuste */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* option : sur petits écrans, un peu plus court */
@media (max-width: 980px){
    .ct-aiCode--ellipsis{
        max-width: 200px;
    }
}
/* Page intégrations */
.ct-aiIntegrations .ct-admin-head{
  align-items:flex-start;
}

.ct-aiIntegrations .ct-admin-subtitle{
  max-width: 980px;
}

/* Grille 2 colonnes + responsive */
.ct-aiIntegrations .ct-aiIntGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
}

@media (max-width: 1100px){
  .ct-aiIntegrations .ct-aiIntGrid{
    grid-template-columns: 1fr;
  }
}

/* Cards */
.ct-aiIntegrations .ct-aiCard{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  overflow:hidden;
}

.ct-aiIntegrations .ct-aiCard__head{
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.ct-aiIntegrations .ct-aiCard__title{
  font-weight:700;
  font-size:16px;
  line-height:1.2;
}

.ct-aiIntegrations .ct-aiCard__sub{
  margin-top:4px;
  font-size:13px;
  color: rgba(0,0,0,.65);
}

/* Form */
.ct-aiIntegrations .ct-aiForm{
  padding:16px;
}

.ct-aiIntegrations .ct-grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

@media (max-width: 700px){
  .ct-aiIntegrations .ct-grid2{
    grid-template-columns: 1fr;
  }
}

.ct-aiIntegrations .ct-field{
  margin:0;
}

.ct-aiIntegrations .ct-label{
  display:block;
  font-weight:600;
  font-size:13px;
  margin: 0 0 6px 0;
  color: rgba(0,0,0,.85);
}

.ct-aiIntegrations .ct-input{
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}

.ct-aiIntegrations .ct-input:focus{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.ct-aiIntegrations .ct-fieldHint{
  margin-top:6px;
  font-size:12px;
  color: rgba(0,0,0,.55);
}

/* Textarea JSON: monospace + hauteur + scroll */
.ct-aiIntegrations .ct-monoTextarea{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  min-height: 120px;
  max-height: 220px;
  resize: vertical;
  overflow:auto;
  line-height:1.35;
}

/* Actions */
.ct-aiIntegrations .ct-aiForm__actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* Tables */
.ct-aiIntegrations .ct-aiTableWrap{
  padding: 0 16px 16px;
}

.ct-aiIntegrations .ct-aiTableWrap--tall{
  max-height: 420px; /* ajuste */
  overflow:auto;
  border-top:1px solid rgba(0,0,0,.06);
}

.ct-aiIntegrations .ct-aiTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}

.ct-aiIntegrations .ct-aiTable thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#fff;
  text-align:left;
  padding:10px 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.75);
  font-weight:700;
}

.ct-aiIntegrations .ct-aiTable tbody td{
  padding:10px 10px;
  border-bottom:1px solid rgba(0,0,0,.06);
  vertical-align:top;
}

.ct-aiIntegrations .ct-aiTable tbody tr:hover td{
  background: rgba(0,0,0,.02);
}

/* Petits badges/status si tu n'en as pas déjà */
.ct-aiIntegrations .ct-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12.5px;
}

.ct-aiIntegrations .ct-pill{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-size:12px;
  font-weight:600;
}

.ct-aiIntegrations .ct-status{
  display:inline-block;
  padding:4px 8px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  font-weight:700;
  font-size:12px;
}

.ct-aiIntegrations .ct-status--ok{
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.30);
}

.ct-aiIntegrations .ct-aiHintSmall{
  padding:0 16px 16px;
  font-size:12px;
  color: rgba(0,0,0,.55);
}
/* =========================
   AI — Intégrations : boutons (skinning local)
   ========================= */

.ct-aiIntegrations .btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:var(--text-main);
  border-radius:12px;
  padding:.55rem .95rem;
  font-weight:800;
  font-size:.92rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.ct-aiIntegrations .btn:hover{
  background:var(--gray-50);
  border-color:rgba(0,0,0,.14);
  box-shadow:0 10px 22px rgba(16,24,40,.08);
}

.ct-aiIntegrations .btn:active{
  transform: translateY(1px);
}

.ct-aiIntegrations .btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(0,94,255,.12);
  border-color: rgba(0,94,255,.30);
}

/* Primary */
.ct-aiIntegrations .btn.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow: 0 12px 24px rgba(0,94,255,.14);
}

.ct-aiIntegrations .btn.btn-primary:hover{
  background:var(--primary-dark);
  border-color:var(--primary-dark);
}

/* Light (ghost) */
.ct-aiIntegrations .btn.btn-light{
  background:#fff;
  border-color:var(--gray-200);
  color:var(--text-main);
}

.ct-aiIntegrations .btn.btn-light:hover{
  background:var(--gray-50);
  border-color:rgba(0,0,0,.12);
}

/* Danger */
.ct-aiIntegrations .btn.btn-danger{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.25);
  color: var(--danger-text);
  box-shadow:none;
}

.ct-aiIntegrations .btn.btn-danger:hover{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.35);
}

/* Small */
.ct-aiIntegrations .btn.btn-sm{
  padding:.45rem .75rem;
  font-size:.86rem;
  border-radius:10px;
}

/* Aligner les actions de formulaire (évite le bouton perdu à droite) */
.ct-aiIntegrations .ct-aiForm__actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}