/* ============================================================
 * File: css/tools/password.css
 * Module: Tool CSS — Password Generator
 * ============================================================ */

/* -------- Options grid -------- */

.dt-pwd-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 16px;
}

.dt-pwd-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 8px;
  border-radius: var(--radius-sm);

  font-size: var(--fs-sm);
  color: var(--color-text);
  cursor: pointer;
  user-select: none;

  transition: background-color var(--duration-fast) var(--ease-standard);
}

.dt-pwd-opt:hover {
  background-color: var(--color-hover);
}

.dt-pwd-opt input[type="checkbox"] {
  margin: 0;
  accent-color: var(--color-accent);
  flex: 0 0 auto;
}

/* -------- Strength meter -------- */

.dt-strength {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dt-strength-bar {
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-2);
  overflow: hidden;
}

.dt-strength-bar__fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  transition: width var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}

.dt-strength-bar__fill--danger  { background: linear-gradient(90deg, #ef4444, #dc2626); }
.dt-strength-bar__fill--warning { background: linear-gradient(90deg, #f59e0b, #d97706); }
.dt-strength-bar__fill--info    { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.dt-strength-bar__fill--success { background: linear-gradient(90deg, #10b981, #059669); }

.dt-strength-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* -------- Password rows -------- */

.dt-passwords {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dt-password-row {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 6px 8px;

  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);

  transition: border-color var(--duration-fast) var(--ease-standard);
}

.dt-password-row:hover {
  border-color: var(--color-border-strong);
}

.dt-password-row__index {
  flex: 0 0 auto;
  width: 22px;
  text-align: right;

  font-size: 10px;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.dt-password-value {
  flex: 1 1 auto;
  min-width: 0;

  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text);

  word-break: break-all;
  white-space: pre-wrap;
  user-select: all;
}