/* =====================================================
   CYBER PASSWORD TOOL — GSSIEP (scoped)
   -----------------------------------------------------
   Ce fichier contient UNIQUEMENT les styles spécifiques
   au module cyber-password.html.
   ===================================================== */

.cyber-tool {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: rgba(2, 6, 23, 0.55);
  box-shadow: var(--shadow-soft);
  padding: 1.8rem 1.6rem;
  margin: 0 auto;
}

/* Harmonisation boutons module avec GSSIEP */
.cyber-tool .tool-btn.primary{
  border-radius: var(--radius-pill);
}
.cyber-tool .tool-btn.secondary{
  border-radius: var(--radius-pill);
  border-color: rgba(148, 163, 184, 0.65);
  color: var(--color-text-soft);
  background: rgba(15, 23, 42, 0.65);
}

@media (max-width: 720px){
  .cyber-tool{
    padding: 1.35rem 1.15rem;
  }
}

.cyber-tool {
      --bg:#020617;
      --card:#0b1220;
      --border:#1f2937;
      --text:#e5e7eb;
      --muted:#9ca3af;

      --weak:#ff4d4d;
      --low:#f97316;
      --mid:#facc15;
      --good:#22c55e;
      --strong:#3b82f6;
    }

.tool-wrapper.cyber-tool{
      background:var(--bg);
      color:var(--text);
      padding:24px;
      border-radius:16px;
      margin-top:2rem;
    }

.cyber-tool .tool-layout{
      display:grid;
      grid-template-columns:2fr 1fr;
      gap:24px;
    }
    @media(max-width:900px){
.cyber-tool .tool-layout{grid-template-columns:1fr;}
    }

.cyber-tool .tool-card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:10px;
      padding:20px;
      margin-bottom:20px;
    }
.cyber-tool .tool-card-full{ grid-column:1 / -1; }
.cyber-tool .tool-card h2, .cyber-tool .tool-card h3{ margin-top:0; }

.cyber-tool .tool-card p{ line-height:1.55; margin-bottom:0.75rem; }

.cyber-tool .muted{ font-size:0.85rem; color:var(--muted); }
.cyber-tool .warning{ font-size:0.8rem; color:var(--low); }

.cyber-tool label{ font-weight:600; display:block; margin-bottom:4px; }

.cyber-tool input[type=password], .cyber-tool input[type=number]{
      width:100%;
      padding:10px;
      border-radius:6px;
      border:1px solid var(--border);
      background:#020617;
      color:var(--text);
    }
.cyber-tool input:focus{
      outline:none;
      border-color:var(--strong);
      box-shadow:0 0 0 2px rgba(59,130,246,0.25);
    }

.cyber-tool .bar{
      background:#1f2937;
      height:14px;
      border-radius:8px;
      overflow:hidden;
      margin-top:12px;
    }
.cyber-tool .bar-fill{
      height:100%;
      width:0%;
      background:var(--weak);
      transition: width 0.35s ease, background-color 0.35s ease;
    }
.cyber-tool .status{ margin-top:10px; font-weight:700; }

.cyber-tool .tool-btn{
      margin-top:10px;
      padding:10px 14px;
      border-radius:6px;
      border:none;
      cursor:pointer;
      background:var(--strong);
      color:#fff;
      font-weight:600;
      transition:background 0.2s ease, transform 0.1s ease;
    }
.cyber-tool .tool-btn:hover{ background:#2563eb; }
.cyber-tool .tool-btn:active{ transform:translateY(1px); }

.cyber-tool .toggle{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin:8px 0;
    }
.cyber-tool .toggle label{ font-weight:500; cursor:pointer; }

.cyber-tool .generated-pwd{
      margin-top:0.75rem;
      padding:0.8rem 1rem;
      background:#020617;
      border:1px solid #1f2937;
      border-radius:8px;
      font-family: inherit;
      font-size:1.05rem;
      font-weight:500;
      color:#e5e7eb;
      line-height:1.5;
      word-break:break-all;
      overflow-wrap:anywhere;
      min-height: 2.2em;
    }

.cyber-tool .scale{ list-style:none; padding:0; margin:0; }
.cyber-tool .scale li{
      margin-bottom:8px;
      padding:6px 10px;
      border-radius:6px;
      background:rgba(255,255,255,0.03);
      font-weight:500;

      opacity: 0.35;
      transition: opacity 0.2s ease, background 0.2s ease;
    }

.cyber-tool .A{color:var(--strong)}
.cyber-tool .B{color:var(--good)}
.cyber-tool .C{color:var(--mid)}
.cyber-tool .D{color:var(--low)}
.cyber-tool .E{color:var(--weak)}

.cyber-tool .scale li.active{
      opacity: 1;
      background: rgba(255,255,255,0.06);
      border-left: 4px solid currentColor;
      padding-left: 10px;
    }



/* ====== Additions v6 (cyber-password) ====== */
.is-hidden{ display:none !important; }
.small{ font-size: 0.92rem; line-height: 1.35; }

.pdf-export{ margin-top: 1.25rem; display:flex; flex-direction:column; gap: 0.75rem; }
.pdf-warning{ padding: 0.9rem 1rem; border: 1px solid rgba(148,163,184,0.35); border-radius: 14px; background: rgba(2,6,23,0.03); }
.btn-row{ display:flex; flex-wrap:wrap; gap: 0.6rem; align-items:center; margin-top: 0.6rem; }

/* === Report tabs === */
.report-tabs .tabs-nav{
  display:flex;
  flex-wrap:wrap;
  gap: 0.75rem; /* ~12px */
  align-items:center;
  margin: 0.85rem 0 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(148,163,184,0.35);
}
@media (max-width: 560px){
  /* Sur mobile : pas de dépassement latéral -> on autorise le retour à la ligne */
  .report-tabs .tabs-nav{
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0.75rem;
    gap: 0.6rem;
  }
  .report-tabs .tabs-nav .btn{
    white-space: normal;
  }
}
.report-tabs .tab-panel{ display:none; padding-top: 0.4rem; }
.report-tabs .tab-panel.is-active{ display:block; }

.report-kpis{
  list-style:none;
  padding:0;
  margin:0.25rem 0 0.8rem;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem; /* ~12px */
}
@media (max-width: 560px){
  .report-kpis{ grid-template-columns: 1fr; }
}
.report-kpis li{
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  background: rgba(2,6,23,0.03);
}
.report-kpis .k{
  display:block;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  opacity: 0.9;
  margin-bottom: 0.25rem;
}
.report-kpis .v{
  display:block;
  font-weight: 700;
  font-size: 1.02rem;
}
.report-list{
  margin: 0.25rem 0 0.2rem;
  padding-left: 1.1rem;
}
.report-list li{ margin: 0.45rem 0; }
.report-note{ margin-top: 0.6rem; }

/* weakHelp inside tabs: keep card but reduce visual weight */
#reportTabs #weakHelp{
  margin-top: 0.95rem;
  border-style: dashed;
  background: rgba(250,204,21,0.05);
}

/* =====================================================
   MOBILE GUARD — cyber-password
   - Empêche les éléments longs (codes, urls) de pousser la page
   ===================================================== */
@media (max-width: 560px){
  .cyber-tool *{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}