/* Styles for Django-rendered allauth pages (login, password set/reset,
   MFA, etc.) - kept separate from vdp_frontend/app/app.css, which these
   pages also load for shared CSS variables and base element styles
   (button, input, label colors, ...). Served directly via Django's
   staticfiles, not the Vite build, so edits here don't need a frontend
   rebuild to take effect. */

.field-label {
  display: block;
  margin-bottom: 4px;
}

.errorlist {
  list-style: none;
  margin: 4px 0;
  padding: 0;
  color: var(--bad);
  font-size: 0.9em;
}

.password-note {
  color: var(--slate-1);
  font-size: 0.9em;
  margin: 8px 0;
}

.password-requirements {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  color: var(--slate-1);
  font-size: 0.9em;

  li {
    padding-left: 20px;
    position: relative;

    &::before {
      content: '○';
      position: absolute;
      left: 0;
    }

    &.met {
      color: var(--good);

      &::before {
        content: '●';
      }
    }
  }
}

.password-field {
  position: relative;
  display: inline-block;

  input {
    padding-right: 36px;
  }

  .password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    border-radius: 4px;
    margin: 0;
    padding: 4px;
    background-color: transparent;
    color: var(--slate-2);
    display: flex;

    &:hover {
      background-color: transparent;
      color: var(--slate-1);
    }

    .password-toggle-slash {
      display: block;
    }

    &.revealed .password-toggle-slash {
      display: none;
    }
  }
}