:root{
  --bg:#f5f6f8; --panel:#ffffff; --fg:#0b1220; --muted:#6b7280;
  --border:#e5e7eb; --accent1:#4f46e5; --accent2:#7c3aed;
  --ok:#16a34a; --warn:#f59e0b; --danger:#dc2626;
  --radius:18px; --shadow:0 12px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 600px at -10% -10%, #eef2ff 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 0%, #e0e7ff 0%, transparent 60%),
    linear-gradient(#f7f8fb,#f3f5f9);
}

/* Header centré + bouton Options à droite */
.header{
  position:sticky; top:0; z-index:10; height:64px;
  backdrop-filter:saturate(1.8) blur(14px);
  background:rgba(255,255,255,.85); border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:980px; margin:0 auto; height:64px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 12px;
}
.brand{
  font-weight:800; letter-spacing:.2px; font-size:18px; justify-self:center;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.header-actions{justify-self:end; display:flex; gap:8px}

/* Layout + footer crédit */
.container{max-width:980px;margin:18px auto;padding:16px}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:980px){ .grid{grid-template-columns:320px 1fr} }

.footer{
  max-width:980px; margin:20px auto 40px; padding:8px 16px;
  color:var(--muted); font-size:12.5px; text-align:center;
}

/* Cards */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

h1{margin:0 0 6px;letter-spacing:-.02em}
h3{margin:0 0 8px}
.muted{color:var(--muted)}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:#eef2ff;border:1px solid var(--border);color:#374151}

/* Inputs / Buttons */
input,button,select{
  width:100%; border:none; border-radius:12px; padding:12px 14px; font-size:15px; color:var(--fg);
}
input,select{background:#f9fafb; outline:1px solid var(--border)}
input:focus,select:focus{outline:2px solid #c7d2fe; background:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.btn-primary{background:linear-gradient(180deg,var(--accent1),var(--accent2));color:#fff;border:1px solid #4338ca}
.btn-ghost{background:#ffffff;color:#111827;border:1px solid var(--border)}
.btn-danger{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* Coffre: lignes */
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.tr{
  display:grid; grid-template-columns:280px 1fr 1fr 180px 110px; gap:12px;
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px 12px;
}
@media (max-width: 860px){
  .tr{
    grid-template-columns:1fr;
  }
}

/* Service + logo */
.service{display:flex;align-items:center;gap:12px;font-weight:600}
.logo{width:28px;height:28px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:#f3f4f6;border:1px solid var(--border)}
.logo img{width:100%;height:100%;object-fit:contain}
.fallback{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#eef2ff;border:1px solid var(--border);font-weight:700;color:#4f46e5}

/* Champs */
.field{display:flex;align-items:center;gap:8px}
.field input{flex:1;max-width:100%}
.mono{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  background:#f9fafb;border:1px solid var(--border);border-radius:8px;padding:8px 10px;
  white-space:nowrap; overflow:auto; word-break:normal;
}
.eye,.copy,.otp{
  display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;
  background:#ffffff;border:1px solid var(--border);cursor:pointer;font-size:12px
}
.otpval{font-weight:800; letter-spacing:.1em}

/* Modal Options */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.25); z-index:50; padding:16px;
}
.modal.show{display:flex}
.modal-panel{
  width:min(520px,100%); background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:18px;
}
.modal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.modal-title{font-weight:800}
.modal-actions{display:flex; gap:8px}
.hidden{display:none}

/* Empêche la réduction excessive des inputs dans les flex */
.field input{min-width:0}

/* Colonne actions responsive & sans débordement */
.actions{
  display:flex; align-items:center; gap:8px;
  justify-content:flex-end; flex-wrap:wrap;
}
@media (max-width: 860px){
  .actions{ justify-content:flex-start; }
}

/* Pastille OTP compacte et lisible */
.otp{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px; border-radius:10px;
  background:#ffffff; border:1px solid var(--border);
  font-size:12px; min-width:96px; justify-content:space-between;

/* ---- Fix largeur champ mot de passe (ne pas se replier) ---- */
.field .secret{
  flex: 1 1 220px;   /* base visible */
  min-width: 160px;  /* jamais 0px */
}
@media (max-width: 860px){
  .field .secret{
    flex-basis: 100%;
    min-width: 0;    /* sur mobile, prendre toute la ligne si besoin */
  }
}}

/* masque visuel pour les inputs secrets (au lieu de type=password) */
.masked{
  -webkit-text-security: disc;
  text-security: disc;
}
.field .secret{flex:1 1 220px;min-width:160px}
@media(max-width:860px){.field .secret{flex-basis:100%;min-width:0}}

/* Header: marque à gauche, actions à droite */
.header-inner{
  max-width:980px;
  margin:0 auto;
  height:64px;
  display:grid;
  grid-template-columns:auto 1fr auto; /* gauche | centre (spacer) | droite */
  align-items:center;
  padding:0 12px;
}
.brand{
  justify-self:start;       /* plus centré : maintenant à gauche */
  font-weight:800;
  letter-spacing:.2px;
  font-size:18px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.header-actions{
  justify-self:end;
  display:flex;
  gap:8px;
}
.spacer{width:100%;}

/* Header: Nebulo Pass à gauche, bouton rouge à droite */
.header-inner {
  max-width: 980px;
  margin: 0 auto;
  height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 12px;
}

.brand {
  justify-self: start;
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: 18px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.header-actions {
  justify-self: end;
}

.spacer {
  width: 100%;
}

/* Bouton rouge Nebulo.tools */
.btn-danger {
  background: #ff4757;
  color: #fff !important;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-danger:hover {
  background: #ff6b81;

/* ==== Vault row: tighter columns, no overflow ==== */
.table{ width:100%; border-collapse:separate; border-spacing:0 10px; }

.tr{
  display:grid; align-items:center; gap:10px;
  /* service | login | secret | Afficher | Copier | OTP/Supprimer */
  grid-template-columns:
    minmax(160px, 210px)
    minmax(260px, 1fr)
    minmax(140px, 220px)
    max-content
    max-content
    max-content;
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px 12px;
}

.field{ display:flex; align-items:center; gap:8px; min-width:0; }
.field .mono{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field input.secret{ width:100%; min-width:0; }

/* action buttons don’t stretch */
.actions{ display:flex; gap:8px; justify-self:end; }
.actions .btn{ width:auto; }
.eye,.copy{ white-space:nowrap; }

/* OTP chip is compact and won’t push layout */
.otp{ min-width:120px; justify-content:space-between; }

/* Responsive: stack nicely on small screens */
@media (max-width: 1024px){
  .tr{
    grid-template-columns:
      minmax(140px, 180px)
      minmax(200px, 1fr)
      minmax(120px, 1fr)
      max-content;
  }
  .actions{ justify-self:start; flex-wrap:wrap; }
}

/* ==== Buttons sizing rules ==== */
/* Stop forcing every button to 100% width */
button{ width:auto; }

/* Utility when you want a full-width button */
.btn-block{ width:100%; }

/* Make user rows clean */
#usersList .tr{ grid-template-columns: 1fr auto auto; }
#usersList .btn-danger{ padding:6px 10px; }}

/* ========================
   🔧 FIX OVERFLOW COFFRE
   ======================== */

/* Conteneur global du coffre */
.table {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Chaque ligne du coffre : ajustée pour tenir dans l'écran */
.tr {
  display: grid;
  align-items: center;
  gap: 8px;
  grid-template-columns:
    minmax(140px, 180px)   /* Service */
    minmax(200px, 1fr)     /* Identifiant */
    minmax(130px, 160px)   /* Mot de passe */
    max-content            /* Afficher */
    max-content            /* Copier */
    max-content            /* OTP / Supprimer */
  ;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  box-sizing: border-box;
}

/* Limite la largeur des champs texte */
.field input.secret {
  max-width: 150px;
}

/* OTP compact et ne pousse plus le reste */
.otp {
  font-size: 13px;
  white-space: nowrap;
}

/* Bouton “Supprimer” réduit */
.actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.actions .btn {
  width: auto;
  padding: 6px 10px;
  font-size: 13px;
}

/* Empêche tout débordement horizontal */
body {
  overflow-x: hidden;
}

/* ========================
   🔧 Panneau de gauche
   ======================== */

/* Boutons dans “Comptes utilisateurs” plus compacts */
#usersList .tr {
  grid-template-columns: 1fr auto;
  align-items: center;
}
#usersList .btn-danger {
  padding: 6px 10px;
  font-size: 13px;
}

/* Ajuste le bouton violet “Créer l’utilisateur” */
#adminPanel button.btn-primary {
  width: 100%;
  margin-top: 4px;
}

/* Responsive : empile les colonnes du coffre en dessous de 1100px */
@media (max-width: 1100px) {
  .tr {
    grid-template-columns:
      minmax(140px, 180px)
      1fr
      max-content
      max-content;
  }
  .actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
/* =========================
   Coffre — layout stable
   ========================= */

/* Chaque ligne: flex + wrap (plus tolérant que grid ici) */
.table { width:100%; max-width:100%; overflow-x:hidden; }
.tr{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  box-sizing:border-box;
}

/* 1) Service (logo + nom, on autorise le wrap jusqu’à 2 lignes) */
.tr > .service{
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  gap:10px;
  flex:1 1 220px;           /* grandit, peut rétrécir, base ~220px */
  min-width:180px;
  max-width:360px;          /* évite qu'il prenne tout */
  line-height:1.2;
  overflow:hidden;
}
.tr > .service{
  /* multi-ligne mais propre (2 lignes max) */
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  display:-webkit-box;
}
.tr > .service .logo{ grid-column:1; }
.tr > .service :not(.logo){ grid-column:2; }

/* 2) Identifiant (2e enfant .field dans le markup) */
.tr > .field:nth-child(2){
  flex:1 1 320px;
  min-width:220px;
}

/* 3) Secret + boutons (3e enfant .field) */
.tr > .field:nth-child(3){
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 1 220px;           /* taille raisonnable */
  min-width:180px;
}
.field input.secret{
  max-width:160px;          /* évite d’étirer la ligne */
}

/* 4) Notes (si présentes) – on les masque en desktop pour gagner de la place */
.tr > .field:nth-child(4){ display:none; }

/* 5) Actions (OTP + Supprimer) : wrap autorisé */
.actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  flex-wrap:wrap;           /* évite la superposition */
  min-width:max-content;
}
.eye,.copy,.btn-danger{ white-space:nowrap; }
.otp{ font-size:13px; white-space:nowrap; }

/* Petits boutons compacts = moins de collisions */
.actions .btn, .tr .btn-ghost, .tr .btn-danger{
  padding:6px 10px;
  font-size:13px;
}

/* =========================
   Colonne utilisateurs
   ========================= */
#usersList .tr{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
}
#usersList .btn-danger{ padding:6px 10px; font-size:13px; }

/* =========================
   Mobile & tablettes
   ========================= */
@media (max-width: 980px){
  /* Empiler proprement :
     ligne 1 = service + login
     ligne 2 = secret + actions (afficher/copier/otp/supprimer) */
  .tr{
    gap:8px 10px;
  }
  .tr > .service{ flex:1 1 100%; max-width:none; }
  .tr > .field:nth-child(2){ flex:1 1 100%; min-width:0; }
  .tr > .field:nth-child(3){ flex:1 1 60%; min-width:0; }
  .actions{ flex:1 1 38%; justify-content:flex-start; }
}

/* Anti-scroll horizontal de sûreté */
html,body{ max-width:100%; overflow-x:hidden; }
/* ===============================
   🧩 Ajustements finaux visuels
   =============================== */

/* 1️⃣ Coffre — admin : empêche "Supprimer" de se coller à Copier */
.actions {
  display: flex;
  flex-wrap: wrap;          /* autorise retour à la ligne */
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 2px;
  min-width: 130px;
}
.actions .btn {
  width: auto;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
}
.actions .btn-danger {
  flex: 1 1 100%;           /* 👉 Sur admin, "Supprimer" prendra une ligne entière si besoin */
  text-align: right;
}

/* Garde l’OTP compact et non cassant */
.otp {
  font-size: 13px;
  white-space: nowrap;
}

/* 2️⃣ Liste d’utilisateurs — réalignement propre du bouton */
#usersList .tr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 6px;
}
#usersList .btn-danger {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 8px;
}

/* 3️⃣ Petits ajustements responsive */
@media (max-width: 980px) {
  .actions {
    justify-content: flex-start;
  }
  .actions .btn-danger {
    flex: 1 1 100%;
    text-align: left;
  }
}
/* --- Coffre: forcer la mise en page en blocs empilés --- */
.tr{
  display:block;                  /* on sort des grilles qui serrent trop */
}

/* lignes "champ + boutons Afficher/Copier" */
.tr .field{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;              /* espace sous la ligne mot de passe */
}

/* zone actions (OTP + Supprimer) DOIT être sous la ligne précédente */
.tr .actions{
  display:flex;
  flex-wrap:wrap;                 /* autorise le retour à la ligne */
  gap:8px;
  width:100%;                     /* prend toute la largeur */
  margin-top:8px;                 /* évite tout chevauchement visuel */
  clear:both;                     /* coupe toute mise en page précédente */
}

/* OTP compact & lisible */
.tr .actions .otp{
  white-space:nowrap;
  font-size:13px;
}

/* "Supprimer" en plein largeur sous les autres actions */
.tr .actions .btn-danger{
  flex:1 1 100%;
  text-align:center;              /* ou right si tu préfères */
  padding:8px 12px;
}

/* petit bonus: sur mobile, on garde le même principe */
@media (max-width: 860px){
  .tr .actions{ justify-content:flex-start; }
  .tr .actions .btn-danger{ flex:1 1 100%; text-align:left; }
}
/* --- Espacement entre les services (cartes du coffre) --- */
.tr {
  display: block;
  margin-bottom: 18px;   /* 🧊 espace vertical entre chaque service */
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.tr:last-child {
  margin-bottom: 0;      /* pas d’espace sous le dernier */
}
/* ===== Dark mode automatique ===== */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f16;
    --panel:#101622;
    --fg:#e6e9ef;
    --muted:#98a2b3;
    --border:#1f2937;
    --accent1:#7c8cf8;
    --accent2:#9b6cff;
    --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444;
    --shadow:0 12px 30px rgba(0,0,0,.35);
  }

  body{
    background:
      radial-gradient(900px 600px at -10% -10%, #0f172a 0%, transparent 60%),
      radial-gradient(900px 600px at 110% 0%, #111827 0%, transparent 60%),
      linear-gradient(#0d1117,#0b0f16);
    color:var(--fg);
  }

  /* panneaux / cartes (y compris les .tr du coffre) */
  .card, .tr{
    background:var(--panel);
    border-color:var(--border);
    box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 4px 12px rgba(0,0,0,0.5);
  }

  /* textes secondaires */
  .muted{ color:var(--muted); }

  /* champs & monospace (identifiant, secret…) */
  input, select, .mono, input.secret, .field input{
    background:#0f172a;
    color:var(--fg);
    border-color:var(--border);
  }
  input:focus, select:focus{ outline-color:#3b82f6; background:#0b1322; }

  /* header en verre sombre */
  .header{ background:rgba(16,22,34,.7); border-bottom-color:var(--border); }

  /* badges */
  .badge{ background:#151b2a; border-color:#222b3c; color:#c7d2fe; }

  /* logos & fallback */
  .logo{ background:#151b2a; border-color:#222b3c; }
  .fallback{ background:#151b2a; border-color:#222b3c; color:#a5b4fc; }

  /* nom de service (si tu l’affiches) */
  .svc-name, .service{ color:var(--fg); }

  /* boutons */
  .btn-ghost{
    background:#151b2a; border:1px solid var(--border); color:var(--fg);
  }
  .btn-ghost:hover{ background:#1f2937; }

  .btn-primary{
    background:linear-gradient(180deg,var(--accent1),var(--accent2));
    color:#fff; border:1px solid #4338ca;
  }

  /* bouton rouge (danger) – lisible en dark */
  .btn-danger{
    background:#7f1d1d; color:#fee2e2; border:1px solid #a83030;
  }
  .btn-danger:hover{ background:#a12128; }

  /* OTP chip */
  .otp{
    background:#151b2a; border:1px solid var(--border); color:var(--fg);
  }
  .otpval{ color:var(--ok); }
}
/* === Fix dark mode : boutons Afficher / Copier === */
@media (prefers-color-scheme: dark) {
  .eye,
  .copy,
  .btn-ghost {
    background: #151b2a !important;
    border: 1px solid var(--border) !important;
    color: var(--fg) !important;
  }

  .eye:hover,
  .copy:hover,
  .btn-ghost:hover {
    background: #1f2937 !important;
  }
}
/* Logo + nom du service côte à côte, propre */
.service{
  display:inline-flex !important;   /* casse toute ancienne règle grid */
  align-items:center;
  gap:10px;
  min-width:0;                      /* permet l’ellipsis */
}
.service .logo{
  width:28px; height:28px; flex:0 0 28px;
}
.svc-name{
  display:inline-block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;                /* une ligne en desktop */
  max-width:100%;
}

/* En mobile, autoriser la 2e ligne si besoin */
@media (max-width: 860px){
  .svc-name{ white-space:normal; }
}
/* === Petit espace sous le nom du service === */
.service {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px; /* 🧊 espace sous le logo+nom */
}

.svc-name {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 860px) {
  .svc-name {
    white-space: normal;
  }
}