/* tool.css (UPDATED) */

/* Prevent any accidental horizontal overflow/jank */
.pn-tool-password-generator{
  overflow-x: hidden; /* fallback */
  overflow-x: clip;   /* modern */
}

/* ---------- Card structure fixes (padding inside bordered cards) ---------- */
.pn-tool-password-generator .tool-surface-card{
  overflow: hidden;
}

.pn-tool-password-generator .tool-surface-card__header{
  padding: 14px 16px;
  border-bottom: 1px solid var(--tool-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pn-tool-password-generator .tool-surface-card__title{
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pn-tool-password-generator .tool-surface-card__body{
  padding: 16px;
}

.pn-tool-password-generator .tool-surface-card__footer{
  padding: 14px 16px;
  border-top: 1px solid var(--tool-border-soft);
}

/* Make form sections breathe a bit */
.pn-tool-password-generator .tool-field + .tool-field{
  margin-top: 14px;
}

/* Header actions */
.pn-tool-password-generator .pnpg-head-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

/* Tabs spacing */
.pn-tool-password-generator .pnpg-tabs{
  margin-top: 12px;
}

/* Chip grid */
.pn-tool-password-generator .pnpg-chipgrid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Advanced grid */
.pn-tool-password-generator .pnpg-adv-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Output group should shrink safely (no overflow) */
.pn-tool-password-generator .pnpg-output-group,
.pn-tool-password-generator .pnpg-output-group input{
  min-width:0;
}

/* Bulk */
.pn-tool-password-generator .pnpg-bulk-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 12px 0;
}

/* ---------- Checkbox check icons (FontAwesome, with robust font stack) ---------- */
/* Keep FA behavior (no custom “CSS tick”) but ensure the font resolves to avoid tofu boxes. */
.pn-tool-password-generator.tool-surface input[type="checkbox"]::after{
  font-family: var(--fa-family-classic, "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free");
  font-weight: 900;
}

/* ---------- Strength progress bar (red → orange → yellow → green) ---------- */
/* Site-wide status tokens are missing in your setup, so we define local, theme-friendly stops. */
.pn-tool-password-generator{
  --pnpg-strength-red:    color-mix(in oklab, #ef4444 86%, var(--bg));
  --pnpg-strength-orange: color-mix(in oklab, #f97316 86%, var(--bg));
  --pnpg-strength-yellow: color-mix(in oklab, #facc15 86%, var(--bg));
  --pnpg-strength-green:  color-mix(in oklab, #22c55e 86%, var(--bg));
}

/* JS sets: --pnpg-strength: 0%..100% on .pnpg-strength */
.pn-tool-password-generator .pnpg-strength{
  --pnpg-strength: 0%;
  position: relative;
  width: 100%;
  max-width: 100%;
  contain: paint;
  isolation: isolate;
}

/* We use the existing inner bar element, but keep it at full width
   and reveal only a portion via clip-path so the gradient does NOT “compress” into green for weak. */
.pn-tool-password-generator .pnpg-strength > div{
  width: 100% !important;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--pnpg-strength-red) 0%,
    var(--pnpg-strength-orange) 35%,
    var(--pnpg-strength-yellow) 65%,
    var(--pnpg-strength-green) 100%
  );

  /* Reveal left portion only (no stretching) */
  clip-path: inset(0 calc(100% - var(--pnpg-strength)) 0 0);
  will-change: clip-path;
}

/* Fallback for browsers without clip-path inset support (rare): use width (may compress gradient) */
@supports not (clip-path: inset(0 0 0 0)){
  .pn-tool-password-generator .pnpg-strength > div{
    width: var(--pnpg-strength) !important;
    clip-path: none;
  }
}

/* Toast */
.pn-tool-password-generator .pnpg-toast{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--tool-surface) 90%, var(--bg));
  color: var(--muted-strong);
  box-shadow: var(--tool-shadow-soft);
  opacity:0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
}
.pn-tool-password-generator .pnpg-toast.is-show{
  opacity:1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 720px){
  .pn-tool-password-generator .pnpg-adv-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .pn-tool-password-generator .tool-surface-card__header{
    flex-direction: column;
    align-items: flex-start;
  }

  .pn-tool-password-generator .pnpg-footer{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .pn-tool-password-generator .pnpg-head-actions{
    width:100%;
    justify-content:flex-start;
  }

  .pn-tool-password-generator .tool-tabs{
    flex-wrap:wrap;
  }
  .pn-tool-password-generator .tool-tab{
    flex: 1 1 auto;
    justify-content:center;
  }
}